Хоть прибитый «футер» на страницах и считается пережитком табличного подхода, такая задача тем не менее возникает регулярно. Существует решение данной проблемы без таблиц, но при условии, что вы знаете высоту футера или способны при ее изменении исправить стили.
Авторство данного метода принадлежит Кэмерону Адамсу (Cameron Adams). Благодаря приведенной технике вы можете прижать ваш подвал к низу страницу при малом размере контента и сохранить нормальное положение вещей, когда контент требует вертикальной прокрутки.
<div id="header-content">
<div id="header">
Шапка сайта
</div>
<div id="content">
Основная контентная часть
</div>
</div>
<div id="footer">
Подвал
</div>Обратите внимание, что вся разметка макета, кроме подвала, должна быть заключена в контейнер, в данном случае div#header-content.
style.css:
html,
body {
height:100%; /* Растягиваем документ на всю высоту окна */
}
#header-content {
position:relative;
min-height:100%; /* Минимальная высота основной части макета */
}
#content {
padding-bottom:3em; /* Пространство необходимое, чтобы подвал не залезал на основную часть при большом количестве контента */
}
#footer {
position:relative;
height:3em; /* Высота подвала, указывать необязательно, но полезно при разработке */
margin:-3em 0 0; /* Поднимаем футер наверх */
}ie.css:
* HTML #header-content {
height:100%; /* Эмулируем min-height для IE <7 */
}Материалы для изучения:
Serhiy // 26 августа 2008 в 14:42
эта техника интересна, еще не встречал. Правда и дизайна где нужно было прибивать футер к низу тоже не было :)
Azadi // 26 августа 2008 в 18:02
height:auto !important;
min-height:100%;
height:100%;
Или !important – зло?
Flack // 28 августа 2008 в 14:07
Azadi, читаемость хромает.
olster28 // 25 февраля 2009 в 17:04
А при если много контента, футер не наезжает на него? Всегда внизу?
Если так – то очень здорово, а главное очень компактно, без фальшблоков.
Flack // 25 февраля 2009 в 22:28
В этом и суть.
olster28 // 26 февраля 2009 в 11:45
Вставил сегодня в один из проектов. Впечатляет! Спасибо огромное за способ – Кэмерону Адамсу за идею, тебе за трансляцию.
Раньше как-то ковырялся с этой проблемой, а тут оказывается такое компактное решение имеется:)
Alex // 30 марта 2009 в 11:49
В ИЕ7 при масштабировании футер улетает наверх или отскакивает вниз.
Если убрать position:relative у футера и контейнера, то начинает вести себя нормально.
Flack // 1 апреля 2009 в 21:29
На момент написания статьи (не публикации в блоге) семерки-восьмерки еще не было.
Так что оставляю на совести :)
Andrey // 15 апреля 2009 в 12:59
Хороший, четкий способ. Спасибо!
Андрей // 15 мая 2009 в 18:37
Уже второй год пользую способ похожий на этот, только для:
html { height: 100%;}
body {
height:100%; /* + эмуляция для ие6 */
position: relative;
}
и для футера:
#footer {
position:absolute;
height:3em;
}
+ для контентного блока паддинг снизу поставить, равный высоте футера.
Anstak // 17 мая 2009 в 19:40
Эххх… К сожалению такой способ вызывает жуткие головные боли если речь идет о верстке резинового шаблона… Проверил на своем опыте. Дело все в том что если вложить #content в какой-нибудь блок (или наоборот), то другой блок не будет растягиваться под него.
Lost Sense // 17 мая 2009 в 19:44
ие 6-7 всё портит =(
при масштабировании футер срывается.
и убирание position:relative не помогает.
так что по ходу на серьезных проектах пока без дополнительного дива не обойтись (
Lost Sense // 17 мая 2009 в 20:37
хотя… только что заметил… и в варианте с лишним дивом происходит тоже самое (
Suphix // 15 декабря 2009 в 03:02
Упущена важная деталь. Для блока “header-content” в стилях необходимо задать:
overflow: auto;
Иначе, его фактическая высота остаётся неизменной независимо от количества внутренней информации, что сразу заметно, если назначить разные фоны данному блоку , внутренним блокам и BODY (а такие ситуации бывают). А при overflow: auto; сохраняется резиновость.