Кросс-браузерный метод, реализующий 100% высоту страницы с помещением нижнего колонтитула в нижнюю часть экрана

С каждым годом мониторы становятся всё больше и больше; как следствие, растёт и разрешение экрана. И страницы с небольшим количеством контента на таких мониторах смотрятся некрасиво — особенно, когда нижний колонтитул (aka подвал aka footer) плавает где-то в верхней части экрана :-)

Многие сайты решают эту проблему при помощи табличной верстки (<table height="100%">) с теми или иными вариациями. Но это не наш метод, ибо это противоречит WCAG 1.0. Поэтому для решения задачи будем использовать семантически корректную разметку и CSS.

На первый взгляд кажется, что прижать футер (так вот будем величать нижний колонтитул для краткости) к нижнему краю окна очень просто: #footer {position: absolute; bottom: 0;}. Но есть один маленький нюанс: если высота содержимого страницы (основного контента) превышает высоту окна, то футер будет прижат к нижнему краю окна, а не контента. Иными словами, футер будет перекрывать какую-то часть контента.

Очень часто проблему позиционирования блоков решают (к сожалению!) при помощи JavaScript (например, вычисляется высота контента и футер абсолютно позиционируется под контент; есть и другие способы).

Начнём с разметки:

[-]
View Code HTML
<body>
    <h1 id="#header">Header</h1>
    <div id="#content">
        <p>Lorem ipsum dolor sit amet</p>
    </div>
    <div id="#footer">Footer</div>
</body>

Для начала нужно указать, что минимальная высота body должна быть не менее 100%:

[-]
View Code CSS
body {
    height: auto;
    min-height: 100%;
    margin: 0;
    padding: 0;
}

Есть два "но":

  1. Если высота задаётся в процентах (как в данном случае), в режиме соответствия стандартам (когда присутствует нормальный !DOCTYPE), высота рассчитывается в процентах от высоты родительского элемента;
  2. Internet Explorer 6 имеет трудности с пониманием min-height.

Первое "но" обходится довольно просто: для body родительским элементом является html, поэтому html и задаем высоту в 100% (html является корнем дерева, поэтому его процентная высота будет вычисляться от высоты окна).

Со вторым "но" особых проблем тоже не вознкает: хоть IE6 и не поддерживает min-height/min-width, зато он интерпретирует height/width как min-height/min-width :-) Удобно, не правда ли?

Получаем:

[-]
View Code CSS
html, body {
    margin: 0;
    padding: 0;
    border: 0;
    width: 100%;
}

html {
    height: 100%;
    overflow: auto; /* Иначе у IE6 начинаются проблемки с вертикальной полосой прокрутки */
}

* html body {
    height: 100%; /* IE 6 */
}

html > body { /* Все остальные */
    min-height: 100%;
    height: auto;
}

Теперь осталось составить стили для заголовка, основного блока и футера.
Есть один маленький нюанс: так как мы хотим прижать футер к самому нижнему краю экрана, нам нужно знать заранее его (футера) высоту. Обычно это не является проблемой, так как в футере содержатся копирайты и несколько ссылок, и размер футера обычно заранее известен. Для заголовка высота не имеет значения (данный макет вытерпит любую разумную высоту :-) ), но для удобства мы её всё же зададим.

[-]
View Code CSS
body {
    position: relative; /* Так как #footer мы планируем позиционировать относительно body */
}

#header {
    margin: 0;
    padding: 0;
    height: 3em;
}

#footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2em;
    padding: .5em 0;
    width: 100%;
}

#content {
    width: 100%;
    padding-top: 1px; /* чтобы предотвратить "схлопывание" границ, если у первого дочернего элемента не нулевой margin-top */
    padding-bottom: 4em /* #footer.offsetHeight + #content.desired-paddingBottom */
}

Под offsetHeight мы здесь понимаем сумму высоты элемента, верхнего и нижнего отступов (padding), верхней и нижней границ (margin) и верхнего и нижнего бордюров (border).
desired-paddingBottom — желаемый нижний отступ для контента (т.е. отступ, который будет присутствовать всегда).

Маленькое замечание: если текста на странице мало (т.е. блок #content имеет маленькую высоту), то его (блока) размер будет больше на #footer.offsetHeight (это может быть важно при задании фоновых картинок). При этом при увеличении блока #content #footer в конце концов "съест" это лишнее пространство.

Собственно, всё.

В ситуации, когда нужно, чтобы все пространство от заголовка до подвала было одного цвета, добавляется еще один контейнер и немного меняется CSS:

[-]
View Code HTML
<html>
<head><title>Title</title></head>
<body>
    <div id="container">
        <h1 id="header">Header</h1>
        <div id="content">Lorem ipsum</div>
        <div id="footer">Footer</div>
    </div>
</body>
</html>
[-]
View Code CSS
* {
    margin: 0;
    padding: 0;
    border: 0;
}

html {
    overflow: auto;
}

html, body {
    height: 100%; /* все предки #container должны иметь высоту */
}

html > body #container {
    height: auto;
    min-height: 100%;
}

* html #container {
    height: 100%;
}

#container {
    position: relative;
}

#header {
    height: 1em;
}

#footer {
    height: 1em;
    position: absolute;
    left: 0;
    bottom: 0;
}

#content {
    padding-bottom: 1.1em;
}

Или можно сделать проще — задать фон body и убрать фон #content. Будет работать, если у #header/#footer нет лишних границ.

Первый пример
Второй пример

Dictum sapienti sat est…

Добавить в закладки

Связанные записи

12
Март
2008

Комментарии к статье «Нижний колонтитул — в нижней части страницы» (22)  »

  1. Denver says:

    также скажите или дайте линку, как поступить в этой ситуации для табличного способа

  2. Vladimir says:

    * применяется к любому селектору.
    Знак > означает, что, например, в записи a > b, b должен быть непосредственным потомком a.

    Я бы порекомендовал к прочтению следующие статьи:

  3. tolich says:

    Отлично!
    А как сделать что бы в первом примере (зеленый) растягивался на всю высоту страницы, до footer’а?

    • Vladimir says:

      Посмотреть пример 2 :)

      Если Вы уберёте лишний текст во втором примере, то получите то, что хотите от первого.

      • tolich says:

        Визуально да. Но я имею ввиду растянуть именно #content между #header и #footer. Содержимое #content будет подгружаться динамически и надо чтобы #content не зависел от его высоты.

        • Vladimir says:

          Во втором примере всё так и есть. Либо я неправильно понимаю, что Вы хотите.

          • tolich says:

            В примере высота #content зависит от текста который у него внутри. Это видно когда текста меньше, чем высота окна браузера.

          • Vladimir says:

            А Вам нужно, чтобы футер всегда был прикреплен к нижней границе окна?

  4. tolich says:

    Владимир, прошу обратить внимание - ключевое слово #content. Хидер и футер размещены отлично. Единственное, что мне хочется - когда размер данных в #content такой, что высота #content меньше размера браузера, то #content должен растягиваться от хидера до футера. Тоесть, в Вашем 1-ом примере, зеленый растянуть до футера, а не перекрасить красный в зеленый. :)

  5. eaden says:

    Ваван! Как же трудно было найти статью по этому вопросу! Все мега-гении интернета только какую-то нереальную демагогию врубают и все. А я ищу готовый рецепт, а не какую-то философию css. А тут - все ясно: контейнер(хедер-контент-футер). Я вставил в свой код, и - бах! Все работает. Обычно мне лень писать благодарности. Но не в этот раз. Спасибо!
    Что этот чувак (tolich) от тебя хочет? Он, наверное сам и не понял)))). Наверное выкладывает нереальную демагогию на эту тему. На досуге. «Ключевое слово»! Наверное нереально умный чел))).
    P.S.: Все подумают, что ты сам себе написал:)
    P.P.S.:Спасибо!

  6. eaden says:

    Как же трудно было найти статью по этому вопросу! Все мега-гении интернета только какую-то нереальную демагогию врубают и все. А я ищу готовый рецепт, а не какую-то философию css. А тут - все ясно: контейнер(хедер-контент-футер). Я вставил в свой код, и - бах! Все работает. Обычно мне лень писать благодарности. Но не в этот раз. Спасибо!

    (На случай, если первое сообщение не пройдет модерацию)

  7. Александр says:

    Если превратить id=”container” в class=”container” для многократного использования, то последующие блоки “container” перестают растягиваться на всю высоту окна, растягиваются только в зависимости от количества контента.

Подписаться на RSS-ленту комментариев к статье «Нижний колонтитул — в нижней части страницы» Trackback URL: http://blog.sjinks.org.ua/css/15-footer-in-the-very-bottom/trackback/

Оставить комментарий к записи «Нижний колонтитул — в нижней части страницы»

Вы можете использовать данные тэги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Оставляя комментарий, Вы выражаете своё согласие с Правилами комментирования.

Подписаться, не комментируя