Блог Прижимаем футер к низу

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

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

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

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

See the Pen qLoBy by Andrey Siaglo (@webmolot) on CodePen.

Поделиться ссылкой на статью:

Предыдущая статья
Следующая статья

Комментарии

Алекс 01 мая 2008 года, 4:17 #

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

webmolot 01 мая 2008 года, 13:36 #

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

Михаил 11 мая 2008 года, 9:37 #

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

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

Михаил 11 мая 2008 года, 9:44 #

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

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

webmolot 11 мая 2008 года, 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 мая 2008 года, 3:27 #

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

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

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

Михаил 12 мая 2008 года, 3:35 #

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

webmolot 20 мая 2008 года, 0:28 #

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

Rebe 22 июля 2008 года, 9:37 #

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

webmolot 29 июля 2008 года, 6:05 #

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

Ромео 20 августа 2008 года, 2:08 #

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

webmolot 20 августа 2008 года, 3:02 #

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

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

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

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

Алекс 21 августа 2008 года, 9:36 #

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

Алекс 21 августа 2008 года, 9:39 #

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

Алекс 21 августа 2008 года, 10:01 #

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

Алекс 21 августа 2008 года, 10:19 #

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

webmolot 21 августа 2008 года, 11:06 #

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

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

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

Алекс 21 августа 2008 года, 11:21 #

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

webmolot 21 августа 2008 года, 11:29 #

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

Алекс 21 августа 2008 года, 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 августа 2008 года, 12:16 #

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

Ромео 26 августа 2008 года, 5:09 #

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

webmolot 26 августа 2008 года, 5:31 #

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

Майки 14 октября 2008 года, 13:31 #

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

на счет лекарства — используйте таблицу для «каркаса».

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

webmolot 15 октября 2008 года, 5:54 #

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

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

Серега 23 октября 2008 года, 16:50 #

Майки

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

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

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

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

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

Серега 29 октября 2008 года, 6:50 #

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

Серега 29 октября 2008 года, 7:55 #

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

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

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

webmolot 30 октября 2008 года, 13:10 #

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

Серега 31 октября 2008 года, 4:24 #

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

webmolot 31 октября 2008 года, 11:14 #

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

Серега 03 ноября 2008 года, 4:25 #

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

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

at0s 07 ноября 2008 года, 12:00 #

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

Yuri 09 ноября 2008 года, 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 ноября 2008 года, 14:06 #

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

Серега 20 ноября 2008 года, 1:43 #

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

webmolot 20 ноября 2008 года, 6:50 #

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

Серега 20 ноября 2008 года, 9:08 #

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

webmolot 21 ноября 2008 года, 0:51 #

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

Серега 25 ноября 2008 года, 1:48 #

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

Николай 05 декабря 2008 года, 14:05 #

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

webmolot 05 декабря 2008 года, 16:00 #

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

webmolot 14 декабря 2008 года, 2:59 #

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

vic 15 января 2009 года, 9:19 #

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

webmolot 15 января 2009 года, 10:44 #

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

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

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

vic 16 января 2009 года, 0:21 #

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

webmolot 16 января 2009 года, 1:14 #

Да, верно.

Блочная верстка CSS 31 января 2009 года, 16:47 #

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

Yoga 13 марта 2009 года, 1:47 #

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

MouldMan 27 июня 2009 года, 13:39 #

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

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

Юрий 10 сентября 2009 года, 11:09 #

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

Владислав 18 сентября 2009 года, 15:37 #

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

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

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

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

Alex Mayhem 22 ноября 2009 года, 19:02 #

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

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

Серега 01 декабря 2009 года, 22:37 #

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

joomla 02 января 2010 года, 19:14 #

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

Леонид 10 января 2010 года, 13:25 #

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

7element 21 января 2010 года, 15:50 #

Щаз вышла opera 10… на ней перестал прикрепляться футер к низу… при ресайзе страницы он остаеться на месте… помогает только F5… Ваше мнение…?

влад 07 марта 2010 года, 0:50 #

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

Это не баг, это фича! 22 ноября 2010 года, 10:05 #

[...] примере про футер я рассказывал про то, что IE6 живет по закону “кто [...]

REDSky Studio 22 декабря 2010 года, 22:31 #

Все получилось.. супер статья)

SRS 13 апреля 2011 года, 13:42 #

У меня почему то при добавлении большого количества контента футер вниз не уезжал. Решил проблему добавлением в .empty:

clear: both;

webmolot 13 апреля 2011 года, 13:50 #

SRS, могу предположить, что у вас для блока, который выше .empty, прописано float:left и поэтому не видел высоту содержимого. После того, как вы очистили поток через clear: both, ошибка исправилась и метод заработал.

Алексендр 17 мая 2011 года, 12:51 #

решил вопрос доволно интерестным способом — написал свой javascript, который делает самостоятельно всю грязную работу за меня. И ни каких min-heigth и heigth там нет. Я использую только 1 строку CSS — а всё работает кроссбраузерно(проверил на всём, что у меня установлено) — футер всегда снизу

вадим 08 октября 2012 года, 18:11 #

js в таких случаях вообще лучше никогда не применять. а хак и условный комментарий это разные вещи. и предпочтительнее использовать последнее. w3c решает)

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

Используйте в комментариях html-теги

ссылка — <a href=""> </a>
выделение — <strong> </strong>
удалённый текст — <del> </del>
цитата — <blockquote> </blockquote>
фрагмент кода html — <pre lang="html"> </pre>
фрагмент кода css — <pre lang="css"> </pre>

Подпишитесь!

Внимание! АКЦИЯ!

Вступите в группу Вконтакте и получите бесплатную консультацию по верстке. Расскажите друзьям про группу и получите 5% скидку на услуги Webmolot.com