22
февраля
2008
Прижимаем футер к низу
Довольно часто мы сталкиваемся с ситуацией, когда на странице мало контента и футер едет вверх. Это чаще всего смотриться некрасиво, да и дизайнера не хочется расстраивать, ведь он же так старался, а мы взяли и все “запороли”.
Расскажу Вам о том, как можно очень просто прижать футер к низу страницы.
Заключаем весь контент, кроме футера в блок с id=”content”, прописываем для него относительное позиционирование и растягиваем по вытоте на весь экран. Ниже, относительно него располагаем блок футера. Важно знать высоту футера, чтобы поднять его вверх на это расстояние.
Вот и все :). Осталось только прописать хак для любимого «ослика» и поставить блок-распорку внизу блока content, чтобы контент в основном блоке не заезжал под футер.
Смотреть пример
Комментарии
Круто. Спасиб за статью.
На здоровье :)
Хм, интересно… но обязательны ли хаки?
Я, например, придерживаюсь вот этого рецепта: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page - и пока что он всюду работал.
Поторопился. По ссылке в предыдущем комментарии всё то же самое, что и у вас, но на английском, а вместо хака используется условный комментарий.
P.S. Без JS по умолчанию вместо имени посылается “Ваше имя / Название компании”. Что будет с JS я проверять не стал.
Не совсем тоже самое, что у меня.
В Вашем примере футер прижимается к низу при помощи position:absolute. В моем же примере его “толкает” к низу блок с контентом для которого стоит высота равная 100%.
Что касается хака. У меня он такой:
*html #content {height: 100%;}
У Вас он такой (условный комментарий это тот же хак):
<!--[if lt IE 7]>/* <!-- */#container {height:100%;}/* --> */</style><![endif]–>Имхо, первый компактнее :)
На самом деле, у меня условный комментарий (хак, являющийся фичей, а не багом) выглядит вот так:
Но это уже дело вкуса…
За статью всё равно спасибо. А я, наверное, попробую совместить оба варианта так, чтобы подвал позиционировался абсолютно, но контент под него не заезжал благодаря распорке - так нижнее поле контента больше не будет зависеть от размеров футера.
<!-- [if lte IE 7] >< link rel="stylesheet" href="/css/ie56fix.css" type="text/css" /><! [endif] –>Высоту футера всеравно придется учитывать, т.к. распорку в блоке с контентом мы должны ставить равную по высоте футеру. Но в 90% случаев дизайн сайта предусматривает фискированный футер, и проблем с этим нету.
Что-то в Opera 9.52 не прижимается :-(
Opera 9.52 еще в beta версии, поэтому протестировал в 9.51
Когда страница загружается, футер не прижимается к низу страницы. Но после того, как я сделал resize страницы, он прижался к низу. Странно себя ведет Opera. Вместе с новой версией появляются и новые глюки :), которых в принципе быть не должно.
Webmolot, получается, что те, кто сидят на опере при работе с сайтом постоянно должны одергивать размер экрана, чтобы футер прижимался книзу, каждый раз когда переходят на другую страницу сайта или просто обновляют страницу??
Опера немалопопулярный браузер.. хотелось бы и там без загагулин. Решения не существует? ;)
Ромео, конечно же я не могу позабыть о пользователях Opera. Если уже о пользователях глюканутого IE6 приходится думать, то все оперА меня просто не поймут :)
Решение найдено!
Опытным путем установлено, когда выносишь стили из html в файл css, футер и в опере версий 9.51 и старше прижимается к низу страницы. Мало того, можно просто прописать тег link в документе html, не ссылаясь ни на что и глюк так же исчезает.
Смотрим пример
* html #content {height:100%;}
скажите зачем это правило??
я имею ввиду, что это хак для ИЕ6, но разве фф непоймет ее?
Вы это пробоваали в фф 3?
У меня очень странный глюк - появляеться прокрутка вправо.
Не могу понять что с ней делать.
Это не глюк - это кривые руки. ссори. но вопрос про селектор остался.
Все, что идет после * html понимает только IE6, это так называемый хак. Такие хаки рекомендуется использовать только в крайнем случае, если другого выхода нельзя найти. Они усложняют css код и делают его невалидным.
Кстати, в нашем примере мы можем обойтись и без него. После свойства css min-height пишем height для IE6, но между ними вставляем так же хак, но более компактный и валидный height:auto !important.
Смотрим пример.
Я просто получаю удовольстиве от ваших советов!
Продолжайте в том же духе и выпустите книгу!
Спасибо!)
моя аська 230489155. хотелось бы вас добавить.
Приятно быть кому то полезным :)
Стучите в аську 446-086-927
постучитесь ко мне.
кстати я сделал как по той ссылке что дал михаил.
я удивлен, потомучто все работает без хаков с высотой для ослика.
Вот код.
*{padding:0; margin:0; border-collapse:collapse; font:1em Arial,serif;}html,body{width:100%; height:100%;}#content {min-height:100%; position:relative; background:#ccc;}#incontent {margin:0 auto; padding:5px 0 229px 0; width:1000px;}#bottomrainbow {background:#ccc; height:229px; position:absolute; bottom:0; width:100%}косяк с ИЕ не обойти без хаков. Все ясно теперь.
Webmolot, спасибо большое за советы! ;)
Действительно, доходчиво и понятно! И вроде бы уже всё идеально.. да вот есть ещё такая мысля… не знаю, считать ли багом, но..
Если пользователь откроет сайт, находясь не в полноэкранном режиме браузера, а потом просто растянет окно по вертикали вниз, то футер не последует вниз, а будет оставлять зазор. После изменения размера экрана по горизонтали или перехода в полноэкранный режим - всё станет на свои места.
Не скажу, что значительно.. но… Кто что думает на этот счет? ;)
Да, есть такой грешек в опере. Причем если тянуть за уголок или тянуть по горизонтали, то все ОК. Я бы не считал это багом, но если кто-нибудь предложит лекарство я буду рад.
прижмите футер к низу, как вы советуете, {bottom: 0;}, затем забейте страницу текстом до появления скролла и посмотрите в ФФ и Опере, что у вас получится..
на счет лекарства - используйте таблицу для “каркаса”.
ЗЫ: если честно, вообще никогда не понимал людей, верстающих *только* дивами, или *только* таблицами… это возможно только для “простых” проектов.
Майки, спасибо за лекарство, но оно мне не понадобится!
В своем решении я не советую писать {bottom: 0}, Вы не внимательно прочитали рецепт.
Майки
ЗЫ: если честно, вообще никогда не понимал людей, верстающих *только* дивами, или *только* таблицами… это возможно только для “простых” проектов.
Бред ! Верстаю только дивами , и могу сказать , что ими можно полностью заменить таблицы , я наоборот не понимаю толку смешанной верстки , вместе дивы и таблицы могут иногда неадекватно себя вести .
Короче любой сайт можно сверстать дивами , любой сложности , с любыми фонами , надо просто уметь верстать )
На таблицы уже смотреть тошно , вспоминаю времена годик назад , когда дивы только начинались , это было из области фантастики , далеко не каждый мог делать их , а щас почти все заказчики просят верстку на дивах , меньше кода , быстрее загрузка , лучше для оптимизации и бла бла ….
Вообщем верстайте дивами человеки , таблицы прошлый век :)
Кстати нашел баг серьезный , в ИЕ 7 при данном способе появляеться скрол вертикальный и горизонтальный , подскажи плз как исправить ?
Способ конечно нашел :
html, body { height:97%; width:99.1%;}
Но так конечно не есть хорошо делать , верстка на професиональном уровне должна быть без хаков под ие
Не понимаю о каком скроле вы говорите?
Открываю пример в IE7, все отлично работает.
Блин не может быть , странно , вот скрин у меня в ИЕ7
http://img76.imageshack.us/my.php?image=footerso9.gif
Проверьте масштаб страницы.
Вот скриншоты страницы, сделанные в browsershots.org для IE6 и IE7:
http://webmolot.com/recipe/footer/ie6.jpg
http://webmolot.com/recipe/footer/ie7.jpg
Ну незнаю , открываю напрямую ссылочку твою на футер через ие7 , есть скрол , масштаб 100% .
В любом случае спасибо за вариант , некоторые заказчики просят делать без абсолютной высоты в body, для того чтоб галерея адекватно работала в ие6 , твой способ очень помог !
Я к примеру не использую position: relative; все и без него чудненько :)
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;
}
Мне Оперу победить через стили не удалось.
Пришлось на онресайз для оперы вешать обработчик,
который удалял и сразу добавлял пустой див со свойствами
position: absolute; bottom: 0px
Привет Webmolot , подскажи плз , есть ли способ сделать футер резиновым , чтоб он тянулся , потому как обычно футер прибивают абсолютными высотами , а они не тянутся
Как ни странно, с такой задачей пока не сталкивался в проектах. Наверное, поэтому универсального решения я не знаю, не занимался специально этим вопросом.
У тебя не было ни разу случая , когда футер тянется ? :)
Задачу, прижать футер к низу страницы, и чтобы его высота не была фиксирована, заказчики передо мной не ставили :)
Чаще всего футер нужен для размещения копирайтов, иногда, нижнего дублирующего меню, а для этого его тянуть не надо.
С подобной задачей можно столкнуться в блогах, где в футере размещают блогролл, но мне такие блоги не приходилось верстать
По поводу скрола в ие7 все норм , мы ошиблись только кодировкой , я верстаю на strict-e , а у тебя Traditional стоит , а они по разному хавают высоты ;-)
Привет. Воспользовался твоим каркасом для сайта. Сверстал, все работает. Но тут заметил баг, при смене масштаба (под IE7), footer ползет к верху… Подскажи как исправить этот баг…..
Николай, resize в IE7 для блоков с position:relative работает некорректно и этот баг никак не связан с футером.
!!! некоторые комментарии за 6.12.08 - 12.12.08 случайно были удалены, приношу свои извинения.
Webmolot, а объясни пожалуйста для чайника, как работает строчка
min-height:100%;height:auto !important;height:100%;
Понятно, что это для IE хак, ведь он не понимает min-height, но не понимаю как работает. Можно по полочкам…?
Все просто.
свойство !important - понимают все браузеры, но IE6 c ошибками.
Одна из ошибок - во всех браузерах значение свойства с !important имеет приоритет над всеми остальными, в IE6 приоритет имеет последнее значение свойства.
Поэтому, значение 100% понимает только IE6, т.к. оно последнее, а все остальные - значение auto, т.к. для него стоит !important.
Понял, для IE6 достаточно свойство height:100%, ведь он растягивает блок если содержимое переполняет его по высоте. Спасибо!
Да, верно.
[...] каркас страницы. Пишем HTML код основных блоков. В CSS прижимаем футер к низу страницы и указываем минимальную ширину [...]
Спасибо очень помогло!
а теперь попробуйте окошко IE стянуть, а потом растянуть за нижний край.
подвальчик то подвиснет, а ведь эту проблему можно решить.
[...] как вопрос этот довольно частый. Рецепт был найден у вебмастера с кувалдой. Респект ему и [...]
Спасибо за статью. Очень помогла.
Очень круто.
Было бы интереснее, если бы в структуру добавил хидер.
пейдж
хидер
/хидер
контент
/контент
футер
/футер
/пейдж
Слабо? ;) Я не разобрался ((
Кстати, у тебя в добавлении комментариев сложно чекбокс найти. Пришлось табом его искать. Браузер - фаерфокс последний.
Владислав, добавление блоков никак не усложняет задачу - добавляйте эти самые блоки в основной (в примере указан как content) а не перед/после него.
P.S. Webmolot, браузер Chrome (dev). Проблема с чекбоксом при комментировании актуальна - мышкой его не задействовать, только табами найти можно.
Прикольно, спасибо, раньше встречал способ только с абсолютным позиционированием футера. Пишите еще :) я умею читать, слова читаю слитно без слогов.
Спасибо за пример, боролся с этим целый день и только на вашем примере получилось :)
Отличный пример!
Вас во-всю цитируют на других площадках.