Как прижать подвал к низу экрана

Дата: 15.02.2009 | Автор: Игорь Квентор | Рубрика: Верстка |

Тэги: , ,

footer-up.gif

Когда на странице сайта мало контента, то при обычной блочной верстке подвал (он же футер) прижимается кверху, хотя по логике вещей должен бы находиться внизу экрана. Но так уж устроены браузеры, что все содержимое страницы кучкуют вверху экрана, занимая плотно все свободное место. Особенно бестолково это выглядит, когда дизайнер рисует футер в виде земельки с травками и прочими жучками. Тут уж хочешь не хочешь, а надо как-то придавить непослушный подвал к низу монитора, вне зависимости от количества контента на странице.

В своей книге о верстке 3-х колоночного шаблона для ВП я уже рассказывал, как этого можно добиться. Но решил вынести темку в отдельный пост, так как вопрос этот довольно частый. Рецепт был найден у вебмастера с кувалдой. Респект ему и уважуха!

Итак, принцип следующий: если мы верстаем страницу, помещая все блоки в один общий контейнер, то блок футера нужно вынести за пределы контейнера. При этом нужно обоим блокам задать относительное позиционирование (position: relative;), в блоке контейнера добавить внизу пустую блок-распорку по высоте равную высоте футера, а футеру, в свою очередь, задать отрицательный верхний отступ на то же значение. В листе стилей у блока контейнера будет задана минимальная высота в 100%. Получится, что контейнер у нас распространится на всю высоту экрана. Но чтобы подвал не потерялся за нижним краем монитора, мы его “подтянем” вверх на отрицательную высоту. То есть, чтобы проделать этот трюк, надо заранее знать, какой высоты будет подвал. Ну, а так как мы это уже знаем, то нет ничего проще.

Теперь подробнее. Общая схема страницы следующая:

<html>
<head></head>
<body>
<div id="container">
<div id="header"></div>
<div id="leftside"></div>
<div id="rightside"></div>
<div class="clearfloat"></div>
<div class="empty"></div>
</div>
<div id="footer"></div>
</body>
</html>

Это 2-х колоночная страница с шапкой и подвалом. Колонка leftside — основной контент, колонка rightside — сайдбар, расположенный, соответственно, справа. Блоки шапки (header), левой и правой колонок находятся в общем блоке контейнера. Сразу после блока сайдбара (rightside) мы прописали так называемую “очистку” — clearfloat. Она помогает избавиться от всяческих глюков и не пускает подвал запрыгивать в пустое пространство страницы, буде там таковое образуется. Вообще, небольшой совет: пишите этот clearfloat всегда. При плавающей верстке (а блочная иногда так и называется) это очень полезная штука.

Сразу после очистки, но до(!) закрытия блока контейнера, мы поместили пустой блок-распорку empty, тем самым зарезервировав место под подвал.

Теперь посмотрим содержимое листа стилей. Я приведу лишь наиболее важные правила, которые реализуют нужный нам эффект. Все попутные правила я опускаю.

* {
margin: 0;
padding: 0;
border: 0;
}

html, body {
width: 100%;
height: 100%;
}

* html #container {
height: 100%;
}

body {
background: #fff;
color: #333;
}

#container {
position: relative;
width: 960px;
margin: 0 auto;
min-height: 100%;
}

.clearfloat {
clear: both;
}

.empty {
height: 50px;
}

#footer {
position: relative;
background: #333;
width: 960px;
height: 50px;
color: #ccc;
font-size: .9em;
margin: -50px auto 0;
}

Что тут есть. Во-первых, мы задаем отдельным набором правил размеры всей страницы как 100% по высоте и по ширине:

html, body {
width: 100%;
height: 100%;
}

Во-вторых, обязательно прописываем хак для ИЕ, иначе он не станет толком работать:

* html #container {
height: 100%;
}

Далее пишем правила для контейнера. Здесь важными являются два момента: относительное позиционирование (relative) и указание на минимальную высоту, опять же в 100%.

#container {
position: relative;
width: 960px;
margin: 0 auto;
min-height: 100%;
}

Для очистки применяем вот такое нехитрое правило:

.clearfloat {
clear: both;
}

А вот пустой блок-распорка имеет следующие параметры:

.empty {
height: 50px;
}

Здесь мы задали только высоту. Как я уже и говорил, высота эта берется из высоты самого футера. То есть, подразумевается, что его высота уже задана в 50 пикселей. Это важно. И вот почему:

#footer {
position: relative;
background: #333;
width: 960px;
height: 50px;
color: #ccc;
font-size: .9em;
margin: -50px auto 0;
}

В наборе правил для подвала мы задали точно такую же высоту. Но обратите внимание: здесь тоже относительное позиционирование (relative), а в самом нижнем правиле прописан минусовой отступ в те же 50 пикселей. То есть, выходит, что контейнер распространился на всю высоту монитора, и по идее, вытеснил подвал за пределы монитора. Но мы смещаем подвал (благодарая опять же относительному позиционированию) на 50 пикселей вверх. Словно бы накладывая подвал поверх контейнера. И в результате и овцы целы и волки довольны. Вот такая вот петрушка.

Пример страницы можно посмотреть здесь, а здесь файл CSS для нее.

Вебсовет

rss Подпишитесь на RSS

Или получайте новости на ваш e-mail:

Комментарии (21) на запись “Как прижать подвал к низу экрана”

  1. nornad 15.02.2009 15:11

    Большое спасибо, Игорь.
    От себя добавлю для таких же начинающих, как и я сам - чтобы подвал не заезжал за нижний край надо ещё убрать padding (а возможно и margin) в css для body и #container.
    Дело в том, что я сначала читал уроки по блочной вёрстке, а потом пробовал как-то приклеить футер книзу на той же странице. CSS там, конечно, отличатся от приведённого выше. :)

  2. Игорь Квентор 15.02.2009 19:40

    Да, верно, может потребоваться корректировка. Например, если контейнеру задать рамку всего в 1 пиксель толщиной, то появляется вертикальная полоса прокрутки. Как раз на эти пару пикселей (1+1). Но сам принцип, думаю, понятен.

  3. rust 19.02.2009 17:15

    Игорь, спасибо за статью, как раз собиралась на днях заняться изучением данного вопроса. Так что очень кстати

  4. Игорь Квентор 19.02.2009 18:02

    rust, не за что! :) Рад, что пригодилось.

  5. Сокол 19.02.2009 18:53

    За темку спасибо,оказалось то все так прсто:) Да и книгу о верстке скачаю,если там все так же доступно,то можно считать что клад сегодня нашел)))

  6. stellar 30.03.2009 19:21

    Спасибо! Очень полезный материал, воспользовался :)

    Но, насколько я могу судить, указывать position: relative здесь совсем не имеет смысла :)
    Ведь свойства left или top не заданы - положение футера задается margin`ом. В соответствии с текущей разметкой HTML по стандартным правилам. Т.е., хоть relative, хоть дефолтный statiс - не имеет значения.

    Так что static имхо логичней получается. Или не так?

  7. Amiora 11.05.2009 22:02

    Средняя часть получается не резиновая???
    Пихаю туда материал, он подкладывается под футер и выезжает снизу из под него…

  8. Amiora 11.05.2009 22:04

    Млин это я что=то нахимичила, в вашем файле резиновый. Пошла мучится. Спасибо за материал!

  9. stenli 26.06.2009 22:19

    Спасибо, как раз искал подобное решение.

  10. Михаил 20.07.2009 13:59

    Действительно, а зачем задавать position: relative?

  11. Игорь Квентор 21.07.2009 07:35

    stellar, Михаил, да вы правы. У блока footer это правило можно смело удалить.

  12. Иван 02.08.2009 18:01

    Игорь. Вы нужный человек.
    Спасибо за вышепреведенную статью
    С Уважением,
    Шевельков Иван

  13. Игорь Квентор 03.08.2009 00:24

    Спасибо, Иван, на добром слове! :)

  14. Михаил 04.08.2009 15:10

    Игорь, попробовал все это проделать, получилось, что ни для блока #container, ни для #footer задавать position: relative не нужно - все и так хорошо работает. А если у #container позиционирование оставить, а у футера убрать, футер провалится. Если задать позиционирование только для футера - тоже все отлично. А так хорошая статья, большое Вам спасибо.

  15. Игорь Квентор 04.08.2009 19:44

    Михаил, а в IE6 пробовали смотреть? Я уже, честно, не помню почему, но на сайте автора, где я нашел данную фишку (http://webmolot.com/prizhimaem-futer-k-nizu/), было про это дело какое-то обсуждение тоже. Там, кстати, в комментах много чего интересного появилось за год. Советую почитать.

  16. Михаил 04.08.2009 20:36

    Да, в IE 6 тоже смотрел, все работает корректно, как написал выше. За ссылку спасибо, почитаю. Скажите, есть ли способ прижать футер не фиксированной высоты?

  17. Игорь Квентор 06.08.2009 07:05

    Про такое пока не слышал. Если найду - расскажу обязательно.

  18. Дмитрий 02.03.2010 18:50

    Вопрос как сие реалиловать чтоб по ширене браузера было и резиновое?

  19. Игорь Квентор 03.03.2010 16:40

    Дмитрий, не пробовали задать центральному блоку ширину в 100%?

  20. Дмитрий 03.03.2010 16:55

    вопрос а по высоте? чтоб при малом наполнении контента растянуть на всю область окна браузера прижав колонки к подвалу, а при большем подвал уезжал вниз

  21. Игорь Квентор 03.03.2010 19:35

    Так статья как раз об этом и написана. Другой вопрос: а надо ли при малом количестве контента делать резину? Что получится в результате на мониторе в 22″ и разрешении экрана 1680х1050? Такой сайт там просто потеряется. Имхо, не вижу смысла в подобных упражнениях. Хотя, каждый волен выбирать что ему по душе :)

Трэкбеки

Оставить комментарий