Какое-то древнее дерьмо

Живёт тупо потому, что за хостинг уплачено на годы вперед

Семантическая верстка — советы и решения. Часть VII. Прижимаем подвал к низу окна

26 августа 2008 · Комментариев: 14 · HTML/CSS, Рецептарий

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

Авторство данного метода принадлежит Кэмерону Адамсу (Cameron Adams). Благодаря приведенной технике вы можете прижать ваш подвал к низу страницу при малом размере контента и сохранить нормальное положение вещей, когда контент требует вертикальной прокрутки.

<div id="header-content">
    <div id="header">
        Шапка сайта
    </div>
    <div id="content">
        Основная контентная часть
    </div>
</div>
<div id="footer">
    Подвал
</div>

Обратите внимание, что вся разметка макета, кроме подвала, должна быть заключена в контейнер, в данном случае div#header-content.

style.css:

html,
body {
    height:100%; /* Растягиваем документ на всю высоту окна */
    }
#header-content {
    position:relative;
    min-height:100%; /* Минимальная высота основной части макета */
    }
#content {
    padding-bottom:3em; /* Пространство необходимое, чтобы подвал не залезал на основную часть при большом количестве контента */
    }
#footer {
    position:relative;
    height:3em; /* Высота подвала, указывать необязательно, но полезно при разработке */
    margin:-3em 0 0; /* Поднимаем футер наверх */
    }

ie.css:

* HTML #header-content {
    height:100%; /* Эмулируем min-height для IE <7 */
    }

Материалы для изучения:

Теги: · ·

Комментариев: 14 ↓

  • Serhiy

    эта техника интересна, еще не встречал. Правда и дизайна где нужно было прибивать футер к низу тоже не было :)

  • Azadi

    height:auto !important;
    min-height:100%;
    height:100%;

    Или !important – зло?

  • Flack

    Azadi, читаемость хромает.

  • olster28

    А при если много контента, футер не наезжает на него? Всегда внизу?

    Если так – то очень здорово, а главное очень компактно, без фальшблоков.

  • Flack

    В этом и суть.

  • olster28

    Вставил сегодня в один из проектов. Впечатляет! Спасибо огромное за способ – Кэмерону Адамсу за идею, тебе за трансляцию.

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

  • Alex

    В ИЕ7 при масштабировании футер улетает наверх или отскакивает вниз.
    Если убрать position:relative у футера и контейнера, то начинает вести себя нормально.

  • Flack

    На момент написания статьи (не публикации в блоге) семерки-восьмерки еще не было.
    Так что оставляю на совести :)

  • Andrey

    Хороший, четкий способ. Спасибо!

  • Андрей

    Уже второй год пользую способ похожий на этот, только для:

    html { height: 100%;}

    body {
    height:100%; /* + эмуляция для ие6 */
    position: relative;
    }

    и для футера:

    #footer {
    position:absolute;
    height:3em;
    }

    + для контентного блока паддинг снизу поставить, равный высоте футера.

  • Anstak

    Эххх… К сожалению такой способ вызывает жуткие головные боли если речь идет о верстке резинового шаблона… Проверил на своем опыте. Дело все в том что если вложить #content в какой-нибудь блок (или наоборот), то другой блок не будет растягиваться под него.

  • Lost Sense

    ие 6-7 всё портит =(
    при масштабировании футер срывается.
    и убирание position:relative не помогает.
    так что по ходу на серьезных проектах пока без дополнительного дива не обойтись (

  • Lost Sense

    хотя… только что заметил… и в варианте с лишним дивом происходит тоже самое (

  • Suphix

    Упущена важная деталь. Для блока “header-content” в стилях необходимо задать:

    overflow: auto;

    Иначе, его фактическая высота остаётся неизменной независимо от количества внутренней информации, что сразу заметно, если назначить разные фоны данному блоку , внутренним блокам и BODY (а такие ситуации бывают). А при overflow: auto; сохраняется резиновость.

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