Градиентный фон с липким нижним колонтитулом

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

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; 
}

источник

2012-01-24 Nathasha Loos

background-attachment: fixe д;

Добавить это в ваше тело CSS.

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

Cross Browser CSS Gradient ... http://webdesignerwall.com/tutorials/cross-browser-css-gradient

источник

2012-01-24 01:18:56

Спасибо! background-attachment: исправлено было трюк. О градиенте, я просто хотел сделать код понятным для этого сообщения. Еще раз спасибо :) –

NICE one! «Исправлена моя головная боль. – neokio

Ты мой герой. –

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

источник

2012-01-24 01:18:08 sanusart

Когда размер установлен в автоматический режим, а не 100%, футер не прилипает к дну. Как предположил Лео Харис, «\t фоновая привязка: фиксированная» к корпусу исправила проблему. Спасибо за вашу помощь :) –

Градиентный фон с липким нижним колонтитулом

ответ

Смежные вопросы