Нижний колонтитул — в нижней части страницы

Кросс-браузерный метод, реализующий 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;
}

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

Если высота задаётся в процентах (как в данном случае), в режиме соответствия стандартам (когда присутствует нормальный !DOCTYPE), высота рассчитывается в процентах от высоты родительского элемента;
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…

Вложения:

Пример №2 — много текста (text/html)
Пример №1 — мало текста (text/html)

Автор: Vladimir; опубликовано в: CSS; метки: CSS, HTML, WAI, WCAG, XHTML, макет, разметка, футер

12
Мар
2008

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

Denver

Ноябрь 22, 2008 в 21:04

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

Ответить
Vladimir

Ноябрь 23, 2008 в 02:41

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

Я бы порекомендовал к прочтению следующие статьи:
- CSS 2.1: Selectors;
- Подборка CSS-хаков для различных браузеров.
Ответить
tolich

Апрель 8, 2009 в 13:47

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

Ответить
- Vladimir
  
  Апрель 8, 2009 в 20:20
  
  Посмотреть пример 2
  
  Если Вы уберёте лишний текст во втором примере, то получите то, что хотите от первого.
  
  Ответить
  - tolich
    
    Апрель 9, 2009 в 08:26
    
    Визуально да. Но я имею ввиду растянуть именно #content между #header и #footer. Содержимое #content будет подгружаться динамически и надо чтобы #content не зависел от его высоты.
    
    Ответить
    - Vladimir
      
      Апрель 9, 2009 в 13:15
      
      Во втором примере всё так и есть. Либо я неправильно понимаю, что Вы хотите.
      - tolich
        
        Апрель 9, 2009 в 16:04
        
        В примере высота #content зависит от текста который у него внутри. Это видно когда текста меньше, чем высота окна браузера.
      - Vladimir
        
        Апрель 11, 2009 в 03:58
        
        А Вам нужно, чтобы футер всегда был прикреплен к нижней границе окна?
tolich

Апрель 12, 2009 в 17:21

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

Ответить
eaden

Апрель 22, 2009 в 15:54

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

Ответить
eaden

Апрель 22, 2009 в 15:56

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

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

Ответить
Александр

Июль 20, 2009 в 14:36

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

Ответить
Триас

Январь 4, 2010 в 18:14

Чел, который Tolich, видимо имел ввиду, что при небольшом содержании (или его отсутствии вообще) блока #content, этот самый блок все равно имеет высоту от header до прижатого к низу footer. А при увеличении содержания, когда оно заполнит визуально блок #content, этот самый блок будет тянуться в высоту, при этом появится полоса прокрутки страницы, а footer будет смещаться за пределы экрана (оставаясь прибитым к нижней границе экрана). Это видимо нужно для размещения бэкграунда в этом блоке снизу, или какого-то повторяемого..

Мне тоже нужен ответ на такой вопрос, но я еще остальные заметки не прочитал

Ответить
- Даниил
  
  Январь 17, 2011 в 05:23
  
  Я тоже не могу найти ответ на этему про контент, который занимает положение между хедером и футером!
  2011 надеюсь кто-нибуль нашел ответ на этот вопрос! )
  
  Ответить