Согласитесь, довольно часто, если сайт занимает не всю  высоту окна, то “висящий” подвал-футер смотрится не очень. Гораздо лучше смотрится “прибитый” к нижней части окна подвал, который в случае увеличения количества текста просто съезжает ниже.

Как прижать футер к низу?

Основным способом прижатия футера к нижней части страницы является задание высоты одного из 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

Опубликовано Понедельник, Август 9, 2010 в 17:52 в следующих категориях: Без рубрики. Вы можете подписаться на комментарии к этому сообщению через RSS 2.0. Вы можете добавить комментарий, или trackback со своего сайта.