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

09.6.2008 – Рубрика: HTML&CSS

Необходимость прижать 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;
}

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

Реализация варианта 4

Tags: CSS, HTML

18 Отзывов to “Как прижать footer к низу окна браузера”

Xero201:
Ноябрь 15, 2008 в 22:24
Ничего не понимаю . Вроде полностью скопировал структуру и разметку а ничего не получается. В первом варианте футер позиционируется нормально, но не сдвигается при увеличении контента. Во втором и третьем варианте все сдвигается отлично, вот только изначально футер уже сдвинут вниз где-то на пол-экрана больше чем полагается. И затем при увеличении контента это разница сохраняется. На прилагаемых примерах все работает отлично, и вообще сайт очень классный. Так что подскажи пожалуйста, в чем может быть проблема (может доктайп не тот или еще что).
З.Ы.
Пара технических замечаний: для футера width:100% указана только для первого варианта, а во всех остальных это параметр исчез.
В прилагаемых примерах не корректно работает кодировка (например я вместо букв вижу какие-то вопросики), поэтому о том что делают вопросики подчеркнутые синим цветом можно догадаться только методом тыка.
Zodios:
Ноябрь 16, 2008 в 22:05
Спасибо за замечание, кодировку исправил.
Любой блок по умолчанию по ширине занимает все свободное пространство по бока от него.

В каком браузере, ОС футер сдвигается?
Zodios:
Ноябрь 17, 2008 в 19:35
Ну это, что ставить диагноз по телефону. Пример в студию!
Xero201:
Ноябрь 17, 2008 в 22:12
Извините пожалуйста, но моя «внимательность» – единственная причина всех моих бед. JavaScript подключался при помощи включения php-файла. А в файл… черт бы меня побрал, была включена еще одна таблица стилей (в которой естественно по всем законам Мерфи оказался #footer {position: absolute; top: 570px; width: 60%;} ). Поэтому еще раз прошу прощения за то, что зря отвлекал внимание и замусорил блог. :большой смайлик самобичевания:
lecm:
Ноябрь 17, 2008 в 22:19
хм. у всех вариантов при уменьшении масштаба в ие7, футер идет вверх и залезает на текст. или так только у меня?
Zodios:
Ноябрь 17, 2008 в 22:39
2Xero201
Бывает), по этому поводу стоит прочитать вот это:
http://zodios.net/thoughts/errorsearching.html

2lecm
Это у всех так, мне кажется это связано с тем что ИЕ масштабирует блок боди, а не содержимое, я сам пока не нашел решения этой проблемы.
Aleximius:
Декабрь 4, 2008 в 20:31
Привет!
Посмотрел пример, все красиво… но, при использовании java-менюхи вся структура ломается! Я уже что только не делал, проверял баги в FireBug, выявил что проблема именно в этом меню, а именно в свойстве position: absolute; правка на relative ничего не дала. Подскажи плиз, что можно сделать! Не уж то, переверстать на таблицу!:(
Zodios:
Декабрь 6, 2008 в 15:14
2Aleximius

Я ведь не телепат. Скинь мне в асю(253218) пример, подскажу что сделать. Если ты говоришь о voltage.su, то ты там неправильно задал отрицательный отступ. Его нужно задавать у нижнего блока, как в примере №2.
WebMast:
Декабрь 24, 2008 в 0:22
Спасибо большое. При верстке клиенту, воспользовался вторым способом. Хотя у меня на блоге стоит само-придуманный вариант
Alex:
Январь 10, 2009 в 16:57
может я туплю,но если использовать вариант №1, то футер будет статичным,т.е. при прокрутке страницы он будет оставаться на месте. Может я чего-то не понимаю….? Объясни, плиз
Zodios:
Январь 12, 2009 в 8:54
В варианте №1 блок боди растягивается на всю ширину и при увеличении контента футтер остается внизу страницы.
Alinaki:
Январь 30, 2009 в 14:55
4 вариант: от IE7 спасает zoom: 1; для wrapper. Он задает hasLayout – true.
rubanok:
Сентябрь 11, 2009 в 18:30
а в opere все 4 варианта не работаю, если тянуть окно за низ
Fortress:
Декабрь 3, 2009 в 20:38
Я взял на вооружение аналогичные способ расположить футер так, чтобы он всегда находился внизу, даже если содержимое не заполняет всю страницу. Предлагается кроссбраузерное решение.
Null:
Март 3, 2010 в 19:29
Объясните, плиз, можно ли в варианте 2 создать wrapper2 внутри wrapper’а, с такой же высотой – min-height:100%; height:auto !important; height:100%. Т.е. чтобы два этих блока одинаково растягивались вниз на сто процентов.

Решаю задачу сложного фона – разный бэкграунд у всей подложки по контуру – справа и слева тень вокруг всего макета. Поэтому нужно два охватывающих дива со своими background-image. Меня интересует, насколько это валидно, и можно ли сделать проще – растянуть див в диве. Спасибо.
CaHbl4:
Май 26, 2010 в 13:33
«Это связано с нюансом блочной модели. Если есть какой-то блок, а в нем находится другой блок с заданным свойством margin-top, то отступ выйдет за грани родительского блока. Данную проблему можно решить путем установки padding-top:1px; тогда верхний отступ будет идти от верхнего края родительского блока.»

А-а-а-а-а-а!!! Спасибо огромное!!! ))

Я только учусь верстать слоями – этого нюанса не знал. Полдня мучился… Спасибо!
Дизайнер:
Июль 4, 2010 в 12:30
ну зачем…зачем вы так паритесь?? я всё понимаю, блочная вёрстка – круть, все дела… но нафига так мучиться? хаки всякие… блин, сделайте таблицу с двумя строками. в первую поместите весь контент, во вторую поместите футер… что-то вроде этого:

CONTENT
FOOTER

*при doctype STRICT нужно еще в и в прописать style=»height:100%».. и все дела…
** я сделал высоту футера 50пикс, потому что она чаще всего известна, в отличии от высоты основного контента
Дизайнер:
Июль 4, 2010 в 12:33
UPD: блин, нормальные люди… написал код, он все теги убрал.. баклан… что за кривая защита?
может лучше использовать html entities? просто преобразовать в текст… эх, ладно, вы безнадежны

Оставить отзыв

Последние записи

DATA:URL – Картинки в документе без дополнительных запросов к серверу
(Вторник, 09. 8. 2009 – 11 отзывов)
Как изменить внешний вид checkbox
(Вторник, 04. 28. 2009 – 24 отзывов)
Как сделать галерею товаров для интернет-магазина
(Пятница, 03. 13. 2009 – 7 отзывов)
Я.ру
(Воскресенье, 03. 8. 2009 – 1 отзыв)

Цифровая печать - Оперативная полиграфия T-Print, печать визиток, флаеров, бланков. Веб-дизайн сайтов

ZODIOS.net