Как прижать футер к низу страницы (руководство к действию) (страница комментариев 2)

26 сентября 2010. Рубрики: Рабочие заметки; автор — Юлия Панина aka Княгиня.

Мой любимый рецепт, которым я пользуюсь, как бы не соврать, лет пять. Абсолютно кроссбраузерный. Краткое изложение рецепта: Читать полностью »

Отзывы (66) на «Как прижать футер к низу страницы (руководство к действию)»
  1. Иван (2 комментария)

    Хороший метод. Спасибо! Буду использовать в своих разработках.

    Ответить на этот комментарий
  2. Галина

    Спасибо большое, все замечательно работает.

    Ответить на этот комментарий
  3. Павел (3 комментария)

    К сожалению, данный способ не работает в IE 6. Да, Майкрософт уже давно призывает выкинуть на помойку обновить эту версию браузера, но в моем случае не учитывать IE 6 нельзя. Как и назвать представленный метод полностью кроссбраузерным =\

    Ответить на этот комментарий
    • Княгиня (655 комментариев)

      Вы, видимо, что-то не так сделали, потому что этот метод работает в ие6. Я им пользуюсь уже 6 лет — тогда ещё даже седьмого ие не было (min-height появилось позже). Проверьте, может, вы не так подключаете подпорки. Кстати, вы мой блог в ие6 видите?

      Ответить на этот комментарий
      • Павел (3 комментария)

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

        <!--[if lte IE 6]> body { height: 100%; } <![endif]-->

        в разметке страницы решает проблемы с IE 6 и, надо полагать, его более младшими версиями.

        Спасибо за метод.

        P.S. Ваш блог в IE 6 у меня отлично смотрится (разве что кнопка «Комментировать» налазит на «Оповещать о новых комментарях по почте»).

        Ответить на этот комментарий
        • Княгиня (655 комментариев)

          Возможно. Я эту «подтяжку» кнопки делала относительно недавно, уже после ухода от шестого, так что могла и пропустить. А типовые подпорки, типа подвала и ещё пары мелочей, у меня зашиты в шпаргалки.

          Ответить на этот комментарий
      • Павел (3 комментария)

        <!--[if lte IE 6]> <style> body { height: 100%; } </style> <![endif]-->

        Ответить на этот комментарий
        • Княгиня (655 комментариев)

          Угу, только я это выношу в отдельный ie6.css и подключаю через условные комментарии.

          Ответить на этот комментарий
  4. Артём (1 комментарий)

    Отличный способ. Спасибо.

    Ответить на этот комментарий
  5. УтБ (5 комментариев)

    Обычно использую данный метод, а кто его автор? не знаете?

    Ответить на этот комментарий
    • Княгиня (655 комментариев)

      Не в курсе. Я его переняла у своего первого препода, известного как Филигон, он же Чебыкин Ростислав Игоревич. Сам он его придумал, или у других подсмотрел — не вем.

      Ответить на этот комментарий
  6. Revski (2 комментария)

    Способ хороший.
    Но он работает криво.
    Добавил между wrapper и footer

    css

    .clear {
    clear: both;
    }
    Работает идеально! спасибо

    Ответить на этот комментарий
    • Княгиня (655 комментариев)

      Я не несу ответственности за глюки моих читателей. Вы, очевидно, верстали на флоутах, а плавающие блоки не учитываются при расчёте высоты их контейнера. Сейчас всё прогрессивное человечество переходит на display: table-cell.

      Ответить на этот комментарий
      • Revski (2 комментария)

        Да, левый и правый сайтбары со свойствами float.
        display: table-cell конечно хорошо, но ИЕ6/7 еще на плаву, как с ними быть?

        Ответить на этот комментарий
        • Княгиня (655 комментариев)

          Сухари сушить. :( Делаем подпорки в условных комментариях: для нормальных браузеров пишем display: table-cell, а для ИЕ6-7 — float. На своём творческом блоге я недавно рискнула проделать эту операцию, исходя из того, что старых ИЕ в статистике почти не осталось. Скоро попробую и на этом.

          А вообще я давно отказалась от float (кроме случая упёртых заказчиков, которым непременно нужна чудная, пардон, дивная вёрстка) и для колоночных макетов использую таблицу. Шапка и подвал — блоки, а две или три колонки — две или три ячейки. Надёжность гарантирована. Идеологическая чистота, правда, страдает, но флоутная вёрстка тоже является отклонением от стандартов.

          Ответить на этот комментарий
          • Al (4 комментария)

            Смысл формировать колонки с помощью display: table-cell, если для ІЕ6-7 придется добавлять float? Не проще ли сразу сделать блоки плавающими и обойтись без костылей? Пока еще есть процент пользователей ІЕ7…

            Ответить на этот комментарий
            • Княгиня (655 комментариев)

              Бьёте, что называется, по больному. :) Я мечтаю о том дне, когда процент ие7 станет равен нулю.

              Однако табличные свойства дают более стабильную вёрстку независимо от содержания колонок. Вот поэтому я предпочитаю основную вёрстку делать на них, а костыли — ну, подставим костыли. При наличии опыта это выполняется на автоматизме. Зато в нормальных браузерах будет аккуратнее.

              Ответить на этот комментарий
  7. сережка

    в Opera 11.64 подтормаживает футер, — когда сначала уменьшаешь окно, а потом снова оттягиваешь, футер остается на старом месте.

    Ответить на этот комментарий
    • Княгиня (655 комментариев)

      Вы что-то не так делаете. Такое возможно, когда прижимание осуществляется скриптом — тогда может понадобиться время на пересчёт положения, но с css никакого пересчёта не происходит: bottom:0, и точка. Ещё в старых версиях ИЕ подвал «подвисал», если на странице были картинки без указания высоты (без неё браузер не мог правильно посчитать высоту страницы). Но в Опере, да ещё 11, такого не бывает.

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

Есть что сказать? Не молчим!

Используйте теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" code=""> <ul> <li> <ol> .

Комментарии короче 200 символов публикуются без активной ссылки. Пробелы не учитываются.

Ссылки с комментариев dofollow. Ознакомьтесь, пожалуйста, с правилами dofollow-комментирования. Кто не читает, тот сам себе враг.