CSS - прижать футер к низу
Согласитесь, довольно часто, если сайт занимает не всю высоту окна, то “висящий” подвал-футер смотрится не очень. Гораздо лучше смотрится “прибитый” к нижней части окна подвал, который в случае увеличения количества текста просто съезжает ниже.
Как прижать футер к низу?
Основным способом прижатия футера к нижней части страницы является задание высоты одного из HTML- элементов равной 100%. Дальше - идут вариации.
1. Можно задать высоту html,body равной 100%, футер делаем абсолютно позиционируемым и отступ от низа делаем нулевым (position:absolute;bottom:0; height:30px;). Чтобы футер не перекрывался или не наезжал на основной контент - делаем внутренний отступ у блока контента равный высоте подвала (padding:30px;)
2. Основной блок (content) растягивается на всю высоту, а footer за счет отрицательного верхнего отступа (margin-top:0) “всплывает” над content-ом.
3. вариант с отрицательными margin и футером с clear:both (http://dimox.name/press_footer_bottom_with_css/#comment-209)
В любом случае окончательную верстку желательно проверить на кроссбраузерность - почти наверняка без “хаков” или дополнительных css-правил не обойдется. В частности, будьте осторожны с IE
http://www.w3school.ru/blog/css/sticky-footer.html
http://xhtml.ru/2005/10/18/footer-stick/ (второй вариант)
http://dimox.name/press_footer_bottom_with_css/
http://webmolot.com/prizhimaem-futer-k-nizu/
UPD Будьте внимательны - разные версии одного и того же браузера opera по-разному отображают приклеенный к низу футер (в частности, проблемы, если не ошибаюсь с Opera 9.63)
Метки: css