Бывает, что на страницах с небольшим количеством информации, «подвал» сайта некрасиво зависает в середине экрана. В таких случаях, необходимо прижимать футер к нижней границе браузера. Я достаточно давно использую один из самых простых и распространённых способов реализации этой идеи.
Суть метода заключается в следующем. На странице создаётся блок container
, который мы растягиваем на всю высоту экрана. А футер, за счёт отрицательного отступа, поднимаем вверх. В блоке с самим содержимым страницы content
, оставляем снизу высоту, равную высоте футера, чтобы они не наезжали друг на друга. Вот и всё.
Стоит заметить, что поскольку IE6 не знает, что такое min-height
, то для него приходится использовать хак. Все браузеры применят height:auto
, а IE6, не умеющий обрабатывать !important
, применит последнее значение height: 100%
.
Основные плюсы данного способа:
— работает во всех браузерах;
— не зависит от количества текста на странице (меньше высоты экрана или больше).

HTML:
<body>
<div id="container">
<div id="content">Содержимое страницы</div>
</div>
<div id="footer">Подвал</div>
</body>
CSS:
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#container {
min-height: 100%;
height: auto !important;
height: 100%;
}
#content {
padding-bottom: 120px;
}
#footer {
height: 120px;
margin-top: -120px;
}
Смотреть пример