Как прижать footer к низу окна браузера
Необходимость прижать footer к низу окна браузера является типичной проблемой. В этой заметке я предлагаю четыре примера того как можно прижать блок к низу окна браузера. Каждый вариант имеет свои недостатки и плюсы. Для всех вариантов общей является структура документа. Разнятся они лишь в CSS. Все верстки были проверенны на кроссбраузерность(Internet Explorer 6,7, Firefox, Opera) и валидность. Все четыре примера резиновые, если увеличить количества содержимого блока content, который приведет к появлению полосы прокрутки, футер все равно будет оставаться в самом низу. Хочу заметить один нюанс этих версток связанный с Opera 9.5. Если все стили прописывать в блоке <style></style> в <header>, footer в Opera 9.5 не будет позиционироваться относительно нижнего края окна, но если все стили прописать во внешнем файле все будет работать. В верстке присутствует JavaScript который выполняет функцию добавления «рыбы» для наглядности примера.
Код общей разметки:
<div id="wrapper">
<div id="header">HEADER</div>
<div id="content">CONTENT</div>
</div>
<div id="footer">FOOTER</div>
Вариант 1(Абсолютное позиционирование)
Суть этого метода прижатия блока состоит в том, что footer позиционируется относительно низа окна браузера. Это делается путем растягивания <body> на высоту всего окна и позиционирования относительно нижнего края блока footer. В блоке content задается свойство padding-bottom равный высоте блока footer , чтоб содержимое блока content не залазило под блок footer при его увеличении.
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
body {
position:relative;
min-height: 100%;
height: auto !important;
height: 100%;
}
#header {
height: 30px;
width: 100%;
background:yellow;
}
#content {
padding-bottom: 40px;
}
#footer {
height: 40px;
width: 100%;
position: absolute;
left:0;
bottom: 0;
background:green;
}
Особенность этого способа прибивания блока к низу окна, состоит в том что блок wrapper здесь и не нужен, но чтобы сохранить разметку общей для всех методов он присутствует в этом примере. Недостатком этого метода является то, что блок content не растянут на всю высоту окна, таким образом, данный метод не подходит для реализации резинового колоночного дизайна. О том зачем нужна конструкция “min-height: 100%;height: auto !important;height: 100%;” рассказывается в статье “Особенности свойства height“
Реализация варианта 1
Вариант2 (footer с отрицательным отступом)
В этом варианте блок wrapper растягивается на все окно браузера, после этого под ним размещается блок footer с отрицательным верхним отступом равным высоте блока footer. Таким образом, блок footer залазит на блок wrapper снизу. После этого, блоку content присваивается отступ снизу, чтоб блок footer не перекрывал содержимого блока content при увеличении последнего до появления полос прокрутки.
html, body {
margin:0;
padding:0;
width:100%;
height:100%;
}
#wrapper {
position:relative;
min-height: 100%;
height: auto !important;
height: 100%;
}
#content {
padding-bottom:40px;
}
#footer {
position: relative;
margin-top: -40px;
height: 40px;
background:green;
}
#header {
height: 30px;
width: 100%;
background:yellow;
}
Вариант 3 (Отрицательный отступ сверху)
Метод похожий на предыдущий с той разницей, что блок wrapper растягивается на 100%, под ним размещается блок footer и блок wrapper оттягивается верх путем установления верхнего отрицательного отступа равного высоте блоа footer. Но нужно не забыть установить блоку header padding-top равный высоте блока footer иначе первое содержимое блока content уйдет за границы экрана. Почему padding, а не margin? Это связано с нюансом блочной модели. Если есть какой-то блок, а в нем находится другой блок с заданным свойством margin-top, то отступ выйдет за грани родительского блока. Данную проблему можно решить путем установки padding-top:1px; тогда верхний отступ будет идти от верхнего края родительского блока. Но если установить родительскому блоку padding-top:1px; его высота будет больше чем 100% и появятся ненужные полосы прокрутки.
html, body {
margin:0;
padding:0;
width:100%;
height:100%;
}
#wrapper {
position:relative;
min-height: 100%;
height: auto !important;
height: 100%;
margin-top:-40px;
}
#footer {
position: relative;
height: 40px;
background:green;
}
#header {
height: 30px;
width: 100%;
padding-top:40px;
background:yellow;
}
В этом варианте, как и в первом, блок content не является обязательным.
Реализация варианта 3
Вариант 4 (Процентное соотношение)
Суть этого метода который позволяет прижать блок к низу окзна браузера состоит в том, что блок wrapper занимает не 100% окна , а меньше, а оставшиеся проценты уходя на футер. Очевидный недостаток данного метода в том, что размер блока wrapper и footer будет изменятся в зависимости от разрешения и размера экрана монитора.
html, body {
margin:0;
padding:0;
width:100%;
height:100%;
}
#wrapper {
position:relative;
min-height: 92%;
height: auto !important;
height: 92%;
}
#footer {
position: relative;
height: 8%;
background:green;
}
#header {
height: 30px;
width: 100%;
background:yellow;
}
6.Сен.2008 | В категории HTML&CSS
Комментарии
12 комментариев к “Как прижать footer к низу окна браузера”
Написать комментарий.
Ничего не понимаю :(. Вроде полностью скопировал структуру и разметку а ничего не получается. В первом варианте футер позиционируется нормально, но не сдвигается при увеличении контента. Во втором и третьем варианте все сдвигается отлично, вот только изначально футер уже сдвинут вниз где-то на пол-экрана больше чем полагается. И затем при увеличении контента это разница сохраняется. На прилагаемых примерах все работает отлично, и вообще сайт очень классный. Так что подскажи пожалуйста, в чем может быть проблема (может доктайп не тот или еще что).
З.Ы.
Пара технических замечаний: для футера width:100% указана только для первого варианта, а во всех остальных это параметр исчез.
В прилагаемых примерах не корректно работает кодировка (например я вместо букв вижу какие-то вопросики), поэтому о том что делают вопросики подчеркнутые синим цветом можно догадаться только методом тыка.
Спасибо за замечание, кодировку исправил.
Любой блок по умолчанию по ширине занимает все свободное пространство по бока от него.
В каком браузере, ОС футер сдвигается?
Ну это, что ставить диагноз по телефону. Пример в студию!
Извините пожалуйста, но моя «внимательность» - единственная причина всех моих бед. JavaScript подключался при помощи включения php-файла. А в файл… черт бы меня побрал, была включена еще одна таблица стилей (в которой естественно по всем законам Мерфи оказался #footer {position: absolute; top: 570px; width: 60%;} ). Поэтому еще раз прошу прощения за то, что зря отвлекал внимание и замусорил блог. :большой смайлик самобичевания:
хм. у всех вариантов при уменьшении масштаба в ие7, футер идет вверх и залезает на текст. или так только у меня?
2Xero201
Бывает), по этому поводу стоит прочитать вот это:
http://zodios.net/thoughts/errorsearching.html
2lecm
Это у всех так, мне кажется это связано с тем что ИЕ масштабирует блок боди, а не содержимое, я сам пока не нашел решения этой проблемы.
Привет!
Посмотрел пример, все красиво… но, при использовании java-менюхи вся структура ломается! Я уже что только не делал, проверял баги в FireBug, выявил что проблема именно в этом меню, а именно в свойстве position: absolute; правка на relative ничего не дала. Подскажи плиз, что можно сделать! Не уж то, переверстать на таблицу!:(
2Aleximius
Я ведь не телепат. Скинь мне в асю(253218) пример, подскажу что сделать. Если ты говоришь о voltage.su, то ты там неправильно задал отрицательный отступ. Его нужно задавать у нижнего блока, как в примере №2.
Спасибо большое. При верстке клиенту, воспользовался вторым способом. Хотя у меня на блоге стоит само-придуманный вариант
может я туплю,но если использовать вариант №1, то футер будет статичным,т.е. при прокрутке страницы он будет оставаться на месте. Может я чего-то не понимаю….? Объясни, плиз
В варианте №1 блок боди растягивается на всю ширину и при увеличении контента футтер остается внизу страницы.
4 вариант: от IE7 спасает zoom: 1; для wrapper. Он задает hasLayout - true.