22 февраля 2008

Прижимаем футер к низу

Довольно часто мы сталкиваемся с ситуацией, когда на странице мало контента и футер едет вверх. Это чаще всего смотриться некрасиво, да и дизайнера не хочется расстраивать, ведь он же так старался, а мы взяли и все “запороли”.

Расскажу Вам о том, как можно очень просто прижать футер к низу страницы.

Заключаем весь контент, кроме футера в блок с id=”content”, прописываем для него относительное позиционирование и растягиваем по вытоте на весь экран. Ниже, относительно него располагаем блок футера. Важно знать высоту футера, чтобы поднять его вверх на это расстояние.

Вот и все :). Осталось только прописать хак для любимого «ослика» и поставить блок-распорку внизу блока content, чтобы контент в основном блоке не заезжал под футер.

Смотреть пример

  • 1 Star2 Stars3 Stars4 Stars5 Stars
  • ОднаКнопка

Комментарии

57
Алекс 01 мая | 4:17

Круто. Спасиб за статью.

webmolot 01 мая | 13:36

На здоровье :)

Михаил 11 мая | 9:37

Хм, интересно… но обязательны ли хаки?

Я, например, придерживаюсь вот этого рецепта: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page - и пока что он всюду работал.

Михаил 11 мая | 9:44

Поторопился. По ссылке в предыдущем комментарии всё то же самое, что и у вас, но на английском, а вместо хака используется условный комментарий.

P.S. Без JS по умолчанию вместо имени посылается “Ваше имя / Название компании”. Что будет с JS я проверять не стал.

webmolot 11 мая | 22:05

Не совсем тоже самое, что у меня.
В Вашем примере футер прижимается к низу при помощи position:absolute. В моем же примере его “толкает” к низу блок с контентом для которого стоит высота равная 100%.

Что касается хака. У меня он такой:
*html #content {height: 100%;}

У Вас он такой (условный комментарий это тот же хак):

  1. <!--[if lt IE 7]>
  2. /* <!-- */
  3. #container {height:100%;}
  4. /* --> */
  5. </style>
  6. <![endif]–>

Имхо, первый компактнее :)

Михаил 12 мая | 3:27

На самом деле, у меня условный комментарий (хак, являющийся фичей, а не багом) выглядит вот так:

Но это уже дело вкуса…

За статью всё равно спасибо. А я, наверное, попробую совместить оба варианта так, чтобы подвал позиционировался абсолютно, но контент под него не заезжал благодаря распорке - так нижнее поле контента больше не будет зависеть от размеров футера.

Михаил 12 мая | 3:35

  1. <!-- [if lte IE 7] >
  2. < link rel="stylesheet" href="/css/ie56fix.css" type="text/css" />
  3. <! [endif] –>

webmolot 20 мая | 0:28

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

Rebe 22 июля | 9:37

Что-то в Opera 9.52 не прижимается :-(

webmolot 29 июля | 6:05

Opera 9.52 еще в beta версии, поэтому протестировал в 9.51
Когда страница загружается, футер не прижимается к низу страницы. Но после того, как я сделал resize страницы, он прижался к низу. Странно себя ведет Opera. Вместе с новой версией появляются и новые глюки :), которых в принципе быть не должно.

Ромео 20 августа | 2:08

Webmolot, получается, что те, кто сидят на опере при работе с сайтом постоянно должны одергивать размер экрана, чтобы футер прижимался книзу, каждый раз когда переходят на другую страницу сайта или просто обновляют страницу??
Опера немалопопулярный браузер.. хотелось бы и там без загагулин. Решения не существует? ;)

webmolot 20 августа | 3:02

Ромео, конечно же я не могу позабыть о пользователях Opera. Если уже о пользователях глюканутого IE6 приходится думать, то все оперА меня просто не поймут :)

Решение найдено!

Опытным путем установлено, когда выносишь стили из html в файл css, футер и в опере версий 9.51 и старше прижимается к низу страницы. Мало того, можно просто прописать тег link в документе html, не ссылаясь ни на что и глюк так же исчезает.

Смотрим пример

Алекс 21 августа | 9:36

* html #content {height:100%;}
скажите зачем это правило??

Алекс 21 августа | 9:39

я имею ввиду, что это хак для ИЕ6, но разве фф непоймет ее?

Алекс 21 августа | 10:01

Вы это пробоваали в фф 3?
У меня очень странный глюк - появляеться прокрутка вправо.
Не могу понять что с ней делать.

Алекс 21 августа | 10:19

Это не глюк - это кривые руки. ссори. но вопрос про селектор остался.

webmolot 21 августа | 11:06

Все, что идет после * html понимает только IE6, это так называемый хак. Такие хаки рекомендуется использовать только в крайнем случае, если другого выхода нельзя найти. Они усложняют css код и делают его невалидным.

Кстати, в нашем примере мы можем обойтись и без него. После свойства css min-height пишем height для IE6, но между ними вставляем так же хак, но более компактный и валидный height:auto !important.

Смотрим пример.

Алекс 21 августа | 11:21

Я просто получаю удовольстиве от ваших советов!
Продолжайте в том же духе и выпустите книгу!
Спасибо!)
моя аська 230489155. хотелось бы вас добавить.

webmolot 21 августа | 11:29

Приятно быть кому то полезным :)
Стучите в аську 446-086-927

Алекс 21 августа | 11:34

постучитесь ко мне.
кстати я сделал как по той ссылке что дал михаил.
я удивлен, потомучто все работает без хаков с высотой для ослика.
Вот код.

  1. *{padding:0; margin:0; border-collapse:collapse; font:1em Arial,serif;}
  2. html,body{width:100%; height:100%;}
  3. #content {min-height:100%; position:relative; background:#ccc;}
  4. #incontent {margin:0 auto; padding:5px 0 229px 0; width:1000px;}
  5. #bottomrainbow {background:#ccc; height:229px; position:absolute; bottom:0; width:100%}
Алекс 21 августа | 12:16

косяк с ИЕ не обойти без хаков. Все ясно теперь.

Ромео 26 августа | 5:09

Webmolot, спасибо большое за советы! ;)
Действительно, доходчиво и понятно! И вроде бы уже всё идеально.. да вот есть ещё такая мысля… не знаю, считать ли багом, но..
Если пользователь откроет сайт, находясь не в полноэкранном режиме браузера, а потом просто растянет окно по вертикали вниз, то футер не последует вниз, а будет оставлять зазор. После изменения размера экрана по горизонтали или перехода в полноэкранный режим - всё станет на свои места.
Не скажу, что значительно.. но… Кто что думает на этот счет? ;)

webmolot 26 августа | 5:31

Да, есть такой грешек в опере. Причем если тянуть за уголок или тянуть по горизонтали, то все ОК. Я бы не считал это багом, но если кто-нибудь предложит лекарство я буду рад.

Майки 14 октября | 13:31

прижмите футер к низу, как вы советуете, {bottom: 0;}, затем забейте страницу текстом до появления скролла и посмотрите в ФФ и Опере, что у вас получится..

на счет лекарства - используйте таблицу для “каркаса”.

ЗЫ: если честно, вообще никогда не понимал людей, верстающих *только* дивами, или *только* таблицами… это возможно только для “простых” проектов.

webmolot 15 октября | 5:54

Майки, спасибо за лекарство, но оно мне не понадобится!

В своем решении я не советую писать {bottom: 0}, Вы не внимательно прочитали рецепт.

Серега 23 октября | 16:50

Майки

ЗЫ: если честно, вообще никогда не понимал людей, верстающих *только* дивами, или *только* таблицами… это возможно только для “простых” проектов.

Бред ! Верстаю только дивами , и могу сказать , что ими можно полностью заменить таблицы , я наоборот не понимаю толку смешанной верстки , вместе дивы и таблицы могут иногда неадекватно себя вести .

Короче любой сайт можно сверстать дивами , любой сложности , с любыми фонами , надо просто уметь верстать )

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

Вообщем верстайте дивами человеки , таблицы прошлый век :)

Серега 29 октября | 6:50

Кстати нашел баг серьезный , в ИЕ 7 при данном способе появляеться скрол вертикальный и горизонтальный , подскажи плз как исправить ?

Серега 29 октября | 7:55

Способ конечно нашел :

html, body { height:97%; width:99.1%;}

Но так конечно не есть хорошо делать , верстка на професиональном уровне должна быть без хаков под ие

webmolot 30 октября | 13:10

Не понимаю о каком скроле вы говорите?
Открываю пример в IE7, все отлично работает.

Серега 31 октября | 4:24

Блин не может быть , странно , вот скрин у меня в ИЕ7
http://img76.imageshack.us/my.php?image=footerso9.gif

webmolot 31 октября | 11:14

Проверьте масштаб страницы.
Вот скриншоты страницы, сделанные в browsershots.org для IE6 и IE7:
http://webmolot.com/recipe/footer/ie6.jpg
http://webmolot.com/recipe/footer/ie7.jpg

Серега 03 ноября | 4:25

Ну незнаю , открываю напрямую ссылочку твою на футер через ие7 , есть скрол , масштаб 100% .

В любом случае спасибо за вариант , некоторые заказчики просят делать без абсолютной высоты в body, для того чтоб галерея адекватно работала в ие6 , твой способ очень помог !

at0s 07 ноября | 12:00

Я к примеру не использую position: relative; все и без него чудненько :)

Yuri 09 ноября | 14:21

position: relative, даёт больше преимуществ!!
Вот другой пример:
~XHTML~

~CSS~
/* border: 1px solid */
.wrapper { position:relative; width:936px; height:100%; }
#page { height:100%; margin-bottom:-80px; }
#page[id] {height:auto; min-height:100%; }
.middle{ padding-bottom:100px}
.footer {
height:80px;
}

Dancv 14 ноября | 14:06

Мне Оперу победить через стили не удалось.
Пришлось на онресайз для оперы вешать обработчик,
который удалял и сразу добавлял пустой див со свойствами
position: absolute; bottom: 0px

Серега 20 ноября | 1:43

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

webmolot 20 ноября | 6:50

Как ни странно, с такой задачей пока не сталкивался в проектах. Наверное, поэтому универсального решения я не знаю, не занимался специально этим вопросом.

Серега 20 ноября | 9:08

У тебя не было ни разу случая , когда футер тянется ? :)

webmolot 21 ноября | 0:51

Задачу, прижать футер к низу страницы, и чтобы его высота не была фиксирована, заказчики передо мной не ставили :)
Чаще всего футер нужен для размещения копирайтов, иногда, нижнего дублирующего меню, а для этого его тянуть не надо.
С подобной задачей можно столкнуться в блогах, где в футере размещают блогролл, но мне такие блоги не приходилось верстать

Серега 25 ноября | 1:48

По поводу скрола в ие7 все норм , мы ошиблись только кодировкой , я верстаю на strict-e , а у тебя Traditional стоит , а они по разному хавают высоты ;-)

Николай 05 декабря | 14:05

Привет. Воспользовался твоим каркасом для сайта. Сверстал, все работает. Но тут заметил баг, при смене масштаба (под IE7), footer ползет к верху… Подскажи как исправить этот баг…..

webmolot 05 декабря | 16:00

Николай, resize в IE7 для блоков с position:relative работает некорректно и этот баг никак не связан с футером.

webmolot 14 декабря | 2:59

!!! некоторые комментарии за 6.12.08 - 12.12.08 случайно были удалены, приношу свои извинения.

vic 15 января | 9:19

Webmolot, а объясни пожалуйста для чайника, как работает строчка
min-height:100%;height:auto !important;height:100%;
Понятно, что это для IE хак, ведь он не понимает min-height, но не понимаю как работает. Можно по полочкам…?

webmolot 15 января | 10:44

Все просто.
свойство !important - понимают все браузеры, но IE6 c ошибками.

Одна из ошибок - во всех браузерах значение свойства с !important имеет приоритет над всеми остальными, в IE6 приоритет имеет последнее значение свойства.

Поэтому, значение 100% понимает только IE6, т.к. оно последнее, а все остальные - значение auto, т.к. для него стоит !important.

vic 16 января | 0:21

Понял, для IE6 достаточно свойство height:100%, ведь он растягивает блок если содержимое переполняет его по высоте. Спасибо!

webmolot 16 января | 1:14

Да, верно.

Блочная верстка CSS 31 января | 16:47

[...] каркас страницы. Пишем HTML код основных блоков. В CSS прижимаем футер к низу страницы и указываем минимальную ширину [...]

Yoga 13 марта | 1:47

Спасибо очень помогло!

MouldMan 27 июня | 13:39

а теперь попробуйте окошко IE стянуть, а потом растянуть за нижний край.
подвальчик то подвиснет, а ведь эту проблему можно решить.

Как прижать подвал к низу экрана · Websovet 04 августа | 18:21

[...] как вопрос этот довольно частый. Рецепт был найден у вебмастера с кувалдой. Респект ему и [...]

Юрий 10 сентября | 11:09

Спасибо за статью. Очень помогла.

Владислав 18 сентября | 15:37

Очень круто.
Было бы интереснее, если бы в структуру добавил хидер.

пейдж
хидер
/хидер
контент
/контент
футер
/футер
/пейдж

Слабо? ;) Я не разобрался ((

Кстати, у тебя в добавлении комментариев сложно чекбокс найти. Пришлось табом его искать. Браузер - фаерфокс последний.

Alex Mayhem 22 ноября | 19:02

Владислав, добавление блоков никак не усложняет задачу - добавляйте эти самые блоки в основной (в примере указан как content) а не перед/после него.

P.S. Webmolot, браузер Chrome (dev). Проблема с чекбоксом при комментировании актуальна - мышкой его не задействовать, только табами найти можно.

Серега 01 декабря | 22:37

Прикольно, спасибо, раньше встречал способ только с абсолютным позиционированием футера. Пишите еще :) я умею читать, слова читаю слитно без слогов.

joomla 02 января | 19:14

Спасибо за пример, боролся с этим целый день и только на вашем примере получилось :)

Леонид 10 января | 13:25

Отличный пример!
Вас во-всю цитируют на других площадках.

Написать комментарий



 * - поля, обязательные для заполнения