Градиентный фон с липким нижним колонтитулом - PullRequest
2 голосов
/ 24 января 2012

Я пытаюсь добавить градиент к фону тела, который начинается с белого и заканчивается серым в нижней части страницы.Поскольку страница имеет липкий нижний колонтитул, когда содержимое больше окна браузера, тело не растягивается и не расширяется вместе с содержимым.Таким образом, градиент останавливается в середине.Может кто-нибудь, пожалуйста, помогите?

HTML:

<html>
    <body>
        <div class="content"> </div>
        <div class="footer"> </div>
    </body>
</html>

CSS:

html {
    height:100%;
}
body { 
    height:100%;
    background: -moz-linear-gradient(top, #fff 0%, #d5d6db 100%);
}
.content {
    min-height: 100%;
}    
.footer {
    height: 55px;
}

Ответы [ 2 ]

5 голосов
/ 24 января 2012

background-attachment: fixed;

Добавьте это к своему телу CSS.

На боковой заметке вы уже можете это знать, но: background: -moz-linear-gradient(top, #fff 0%, #d5d6db 100%); won 'работать на IE.Это свойство только для браузеров на базе Mozilla.

Кросс-браузерный CSS-градиент ... http://webdesignerwall.com/tutorials/cross-browser-css-gradient

0 голосов
/ 24 января 2012

Вам просто нужно настроить CSS тела htmland на автоматический и удалить размер из градиента фона тела - см .: http://jsfiddle.net/ZqkY7/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...