Мой любимый рецепт, которым я пользуюсь, как бы не соврать, лет пять. Абсолютно кроссбраузерный. Краткое изложение рецепта: Читать полностью »
Как прижать футер к низу страницы (руководство к действию) (страница комментариев 2)
26 сентября 2010. Рубрики: Рабочие заметки; автор — Юлия Панина aka Княгиня.
66 комментариев на «Как прижать футер к низу страницы (руководство к действию)»
Иван (2 комментария)
Хороший метод. Спасибо! Буду использовать в своих разработках.
Галина
Спасибо большое, все замечательно работает.
Павел (3 комментария)
К сожалению, данный способ не работает в IE 6. Да, Майкрософт уже давно призывает
выкинуть на помойкуобновить эту версию браузера, но в моем случае не учитывать IE 6 нельзя. Как и назвать представленный метод полностью кроссбраузерным =\Княгиня (660 комментариев)
Вы, видимо, что-то не так сделали, потому что этот метод работает в ие6. Я им пользуюсь уже 6 лет — тогда ещё даже седьмого ие не было (min-height появилось позже). Проверьте, может, вы не так подключаете подпорки. Кстати, вы мой блог в ие6 видите?
Павел (3 комментария)
Ну да, я, конечно же, не учел ваше замечание об IE 6 в тексте, который я лишь бегло проглядел. Простое добавление
<!--[if lte IE 6]> body { height: 100%; } <![endif]-->
в разметке страницы решает проблемы с IE 6 и, надо полагать, его более младшими версиями.
Спасибо за метод.
P.S. Ваш блог в IE 6 у меня отлично смотрится (разве что кнопка «Комментировать» налазит на «Оповещать о новых комментарях по почте»).
Княгиня (660 комментариев)
Возможно. Я эту «подтяжку» кнопки делала относительно недавно, уже после ухода от шестого, так что могла и пропустить. А типовые подпорки, типа подвала и ещё пары мелочей, у меня зашиты в шпаргалки.
Павел (3 комментария)
<!--[if lte IE 6]> <style> body { height: 100%; } </style> <![endif]-->Княгиня (660 комментариев)
Угу, только я это выношу в отдельный ie6.css и подключаю через условные комментарии.
Артём (1 комментарий)
Отличный способ. Спасибо.
УтБ (5 комментариев)
Обычно использую данный метод, а кто его автор? не знаете?
Княгиня (660 комментариев)
Не в курсе. Я его переняла у своего первого препода, известного как Филигон, он же Чебыкин Ростислав Игоревич. Сам он его придумал, или у других подсмотрел — не вем.
Revski (2 комментария)
Способ хороший.
Но он работает криво.
Добавил между wrapper и footer
css
.clear {
clear: both;
}
Работает идеально! спасибо
Княгиня (660 комментариев)
Я не несу ответственности за глюки моих читателей. Вы, очевидно, верстали на флоутах, а плавающие блоки не учитываются при расчёте высоты их контейнера. Сейчас всё прогрессивное человечество переходит на display: table-cell.
Revski (2 комментария)
Да, левый и правый сайтбары со свойствами float.
display: table-cell конечно хорошо, но ИЕ6/7 еще на плаву, как с ними быть?
Княгиня (660 комментариев)
Сухари сушить.
Делаем подпорки в условных комментариях: для нормальных браузеров пишем display: table-cell, а для ИЕ6-7 — float. На своём творческом блоге я недавно рискнула проделать эту операцию, исходя из того, что старых ИЕ в статистике почти не осталось. Скоро попробую и на этом.
А вообще я давно отказалась от float (кроме случая упёртых заказчиков, которым непременно нужна чудная, пардон, дивная вёрстка) и для колоночных макетов использую таблицу. Шапка и подвал — блоки, а две или три колонки — две или три ячейки. Надёжность гарантирована. Идеологическая чистота, правда, страдает, но флоутная вёрстка тоже является отклонением от стандартов.
Al (4 комментария)
Смысл формировать колонки с помощью display: table-cell, если для ІЕ6-7 придется добавлять float? Не проще ли сразу сделать блоки плавающими и обойтись без костылей? Пока еще есть процент пользователей ІЕ7…
Княгиня (660 комментариев)
Бьёте, что называется, по больному.
Я мечтаю о том дне, когда процент ие7 станет равен нулю.
Однако табличные свойства дают более стабильную вёрстку независимо от содержания колонок. Вот поэтому я предпочитаю основную вёрстку делать на них, а костыли — ну, подставим костыли. При наличии опыта это выполняется на автоматизме. Зато в нормальных браузерах будет аккуратнее.
сережка
в Opera 11.64 подтормаживает футер, — когда сначала уменьшаешь окно, а потом снова оттягиваешь, футер остается на старом месте.
Княгиня (660 комментариев)
Вы что-то не так делаете. Такое возможно, когда прижимание осуществляется скриптом — тогда может понадобиться время на пересчёт положения, но с css никакого пересчёта не происходит: bottom:0, и точка. Ещё в старых версиях ИЕ подвал «подвисал», если на странице были картинки без указания высоты (без неё браузер не мог правильно посчитать высоту страницы). Но в Опере, да ещё 11, такого не бывает.