Много способов прижатия футера к нижней кромке окна уже изобретено и описано, стОит только погуглить. Но хочется поделиться тем, к чему пришёл самостоятельно (пришлось изобретать, т.к. не было инета под рукой :))…
Сначала пошёл ошибочным путём: основной DIV с контентом — 100% по высоте, а хидер и футер спозиционированы абсолютно. Выглядит нормально во всех браузерах, но в ИЕ6 вылезал косяк — при динамической смене контента (через javascript) футер оставался на своем месте, т.е. не перемещался вслед за кромкой окна. Поэтому сделал так: DIV с основным контентом, DIV-футер с отрицательным margin-top, DIV-хидер с абсолютным позиционированием. Нарисовался очевидный плюс данного способа: основной контент страницы в HTML-коде максимально приближен к началу документа.
Вот несколько комментариев по коду:
1. не знаю, как поведёт себя всё это при смене doctype (не было времени проверить)
2. DIV в ФФ и Опере будет тянуться на 100% по высоте, при условии, что его родительский элемент имеет высоту 100% (для этого в style есть строчка html, body {height: 100%}), и задается высота для DIV именно через min-height.
3. В силу того, что ИЕ6 не видит !important, удалось обойтись без хаков :) Спасибо set.
4. Для отступов внутри этих трёх основных DIV-ов лучше не использовать padding, применённый к самим DIV-ам, а вложить в каждый из них по дополнительному DIV-у, и к нему уже применить все необходимые отступы (как я и сделал).
5. В моем примере ширина задана жестко (для нерезинового отцентрованного сайта). Резиновость тоже очень легко реализовать, достаточно убрать width у DIV-ов с классом container.
6. Потестировал в Opera 9.27, Firefox 3, IE 6, IE 7. Везде работает :)
Посмотреть шаблон странички можно тут: e1.nnov.ru/template.html
HTML-код странички:
UPD: Внёс некоторое изменение в css: теперь код без css-хаков.
UPD2: slil.ru/25963498 — скриншоты отображения тестовой страницы в различных браузерах (хулиганит только Опера 9.50+, остальные браузеры отображают как надо)
Сначала пошёл ошибочным путём: основной DIV с контентом — 100% по высоте, а хидер и футер спозиционированы абсолютно. Выглядит нормально во всех браузерах, но в ИЕ6 вылезал косяк — при динамической смене контента (через javascript) футер оставался на своем месте, т.е. не перемещался вслед за кромкой окна. Поэтому сделал так: DIV с основным контентом, DIV-футер с отрицательным margin-top, DIV-хидер с абсолютным позиционированием. Нарисовался очевидный плюс данного способа: основной контент страницы в HTML-коде максимально приближен к началу документа.
Вот несколько комментариев по коду:
1. не знаю, как поведёт себя всё это при смене doctype (не было времени проверить)
2. DIV в ФФ и Опере будет тянуться на 100% по высоте, при условии, что его родительский элемент имеет высоту 100% (для этого в style есть строчка html, body {height: 100%}), и задается высота для DIV именно через min-height.
3. В силу того, что ИЕ6 не видит !important, удалось обойтись без хаков :) Спасибо set.
4. Для отступов внутри этих трёх основных DIV-ов лучше не использовать padding, применённый к самим DIV-ам, а вложить в каждый из них по дополнительному DIV-у, и к нему уже применить все необходимые отступы (как я и сделал).
5. В моем примере ширина задана жестко (для нерезинового отцентрованного сайта). Резиновость тоже очень легко реализовать, достаточно убрать width у DIV-ов с классом container.
6. Потестировал в Opera 9.27, Firefox 3, IE 6, IE 7. Везде работает :)
Посмотреть шаблон странички можно тут: e1.nnov.ru/template.html
HTML-код странички:
<!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
New Document
/>
Здесь будет контент
Подвал
Шапка
UPD: Внёс некоторое изменение в css: теперь код без css-хаков.
UPD2: slil.ru/25963498 — скриншоты отображения тестовой страницы в различных браузерах (хулиганит только Опера 9.50+, остальные браузеры отображают как надо)
