Бывает, что на страницах с небольшим количеством информации, «подвал» сайта некрасиво зависает в середине экрана. В таких случаях, необходимо прижимать футер к нижней границе браузера. Я достаточно давно использую один из самых простых и распространённых способов реализации этой идеи.
Суть метода заключается в следующем. На странице создаётся блок 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; }