Как прижать footer к низу страницы

Home

Как прижать footer к низу страницы

( 0 - user rating )

В этой статье я продемонстрирую один из способов как прижать footer к низу страницы.
Существует много способов это сделать, но большинство из них используют либо дополнительные хаки, либо дополнительное, не нужное количество html тегов. Этот метод для размещения footer внизу страницы имеет ряд преймуществ над другими методами. Во-первых, используется всего лишь 15 строк css и минимальное количество html тегов. Во-вторых, css код полностью валидный и корректно работает IE5++, Firefox, Safari, Opera.

Как использовать этот метод

Так как этот метод, чтобы прижать footer, использует минимальное количество кода, то с внедрением его в Ваши страницы не должно возникнуть никаких проблем.

* {
margin:0;
}
html, body {
height:100%;
}
.wrapper {
min-height:100%;
height:auto !important;
height:100%;
margin:0 auto -4em;
}
.footer, .push {
height:4em;
}

<div class="wrapper">
<p>Контент</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Текст в футере</p>
</div>

Что заставляет footer прижиматься к низу страницы?

Не смотря на то, что метод выглядит очень просто, я думаю, нужно немного разьяснить принцип его работы.

Высота равная 100% для контейнеров html и body заставляет вашу страницу использовать всю доступную высоту окна браузера.
Для контейнера с классом .wrapper указывается минимальная ширина равная 100%. О том, как это сделать кроссбраузерно, написано в статье: Кроссбраузерная минимальная высота(min-height)
А теперь и начинается вся магия этого метода. Вы наверно заметили, что у контейнера .wrapper также указан отрицательный нижний отступ равный 4em. 4em - это высота футера. А у контейнера .push высота указана тоже 4em. Пустой контейнер служит для резервирования места для футера. Ну и сам контейнер .footer располагается в этом зарезервированом месте.

Вот и все. Все просто и понятно.

+4 # temp 2009-01-29 15:13 Во втором пункте разъяснения метода запись "… .wrapper указывается минимальная ширина равная 100%…".

Думаю, речь идет о высоте все-таки. Ответить | Ответить с цитатой | Цитировать

-5 # HeldEronRid 2009-02-04 17:17 а вы пробовали это в каком-то примере??? Ответить | Ответить с цитатой | Цитировать

-1 # muraha 2009-02-04 18:05 Да пробывал. Пример 100% рабочий.
Единственно, что правильно подметил temp в описании имеется ввиду высота.

Если не работает, то возможно все кроется в Вашем доктайпе. Используйте strict Ответить | Ответить с цитатой | Цитировать

-8 # error 2009-02-17 08:45 метод - 0… кроссбраузернос ть - 0… что теперь везде доктайп менять??… зачем тогда вообще xhtml??… давайте все верстать опять начнем таблицами… блог бесполезный… ИМХО… Ответить | Ответить с цитатой | Цитировать

-3 # muraha 2009-02-17 13:26 Та пожалуйста, верстайте хоть таблицами, хоть вообще не верстайте. А к чему вопрос "зачем тогда вообще xhtml?" я вообще не понимаю. Хотите, чтоб все работало безукоризненна используйте "HTML 4.01 Transitional" и все будет все работать. Ваше имхо смахивает на имхо обиженного человека, которому не дали того, что он хочет. Ответить | Ответить с цитатой | Цитировать

+1 # VinchiDA 2009-03-12 21:52 все работает отлично!!! постоянно этим методом пользуюсь!! Ответить | Ответить с цитатой | Цитировать

+1 # Ruman 2009-03-20 19:28 Большое спасибо! всё работает! Ответить | Ответить с цитатой | Цитировать

+1 # Garovsky 2009-04-29 20:04 один из лучших методов прибивания футера к низу окна браузера :)

вместо
height:auto !important;
height:100%;

можно написать
_height: 100%; Ответить | Ответить с цитатой | Цитировать

0 # Izem 2009-04-30 12:01 Garovsky, можно, конечно, и так написать, но вариант с "_height" становится невалидным. А автор, видимо, использовал только валидный CSS. Ответить | Ответить с цитатой | Цитировать