Как можно исправить градиентный фон CSS3 при использовании поля для контента? - PullRequest
Новая
       16

Как можно исправить градиентный фон CSS3 при использовании поля для контента?

1 голос
/ 04 марта 2011

Я создаю свою первую страницу с использованием CSS3, и я сталкиваюсь с проблемой. Я использовал этот вопрос и ответ , чтобы создать аккуратный фон для тела моего сайта. Это работало нормально, пока я не добавил класс контента. Это привело к тому, что CSS-градиент не совсем достиг конца страницы (прокрутите вниз, чтобы увидеть эффект). Вот мой CSS: 

html{
    height: 100%
}

body {
    background: #c5deea; /* old browsers */

    background: -moz-linear-gradient(top, #c5deea 0%, #8abbd7 31%, #066dab 100%); /* firefox */

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c5deea), color-stop(31%,#8abbd7), color-stop(100%,#066dab)); /* webkit */

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c5deea', endColorstr='#066dab',GradientType=0 ); /* ie */

    height: 100%;
    margin: 0;
    background-repeat: no-repeat;
}

#content{
    -moz-box-shadow: 0 0 5px #888;
    -webkit-box-shadow: 0 0 5px#888;
    box-shadow: 0 0 5px #888;

    background: white;
    margin-left: auto;
    margin-right: auto;
    padding: .5%;
    margin-top: 2%;
    margin-bottom: 2%;
    width: 50%;
}

h1, h2, h3 {
    color: #066dab;
}

Может кто-нибудь сказать мне, что пошло не так, и как это исправить? Я должен отметить, что я очень новичок в CSS, не говоря уже о CSS3; Итак, любые идеи приветствуются

1 Ответ

2 голосов
/ 04 марта 2011

Сделайте это вместо этого:

Live Demo

  • Я убрал, как вы былинастройка height: 100%.
  • Я снял margin с #content.
  • Чтобы компенсировать потерю margin, я добавил дополнительный элемент-обертку и дал ему padding: 2%.
...