карты все записи автора Как прижать footer к низу окна браузера




Необходимость прижать footer к низу окна браузера является типичной проблемой. В этой заметке я предлагаю четыре примера того как можно прижать блок к низу окна браузера. Каждый вариант имеет свои недостатки и плюсы. Для всех вариантов общей является структура документа. Разнятся они лишь в CSS. Все верстки были проверенны на кроссбраузерность(Internet Explorer 6,7, Firefox, Opera) и валидность. Все четыре примера резиновые, если увеличить количества содержимого блока content, который приведет к появлению полосы прокрутки, футер все равно будет оставаться в самом низу. Хочу заметить один нюанс этих версток связанный с Opera 9.5. Если все стили прописывать в блоке в , 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 позиционируется относительно низа окна браузера. Это делается путем растягивания на высоту всего окна и позиционирования относительно нижнего края блока 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;
}

Реализация варианта 2
Вариант 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;
}