Кросс-браузерный метод, реализующий 100% высоту страницы с помещением нижнего колонтитула в нижнюю часть экрана
С каждым годом мониторы становятся всё больше и больше; как следствие, растёт и разрешение экрана. И страницы с небольшим количеством контента на таких мониторах смотрятся некрасиво — особенно, когда нижний колонтитул (aka подвал aka footer) плавает где-то в верхней части экрана 
Многие сайты решают эту проблему при помощи табличной верстки (<table height="100%">) с теми или иными вариациями. Но это не наш метод, ибо это противоречит WCAG 1.0. Поэтому для решения задачи будем использовать семантически корректную разметку и CSS.
На первый взгляд кажется, что прижать футер (так вот будем величать нижний колонтитул для краткости) к нижнему краю окна очень просто: #footer {position: absolute; bottom: 0;}. Но есть один маленький нюанс: если высота содержимого страницы (основного контента) превышает высоту окна, то футер будет прижат к нижнему краю окна, а не контента. Иными словами, футер будет перекрывать какую-то часть контента.
Очень часто проблему позиционирования блоков решают (к сожалению!) при помощи JavaScript (например, вычисляется высота контента и футер абсолютно позиционируется под контент; есть и другие способы).
Начнём с разметки:
<h1 id="#header">Header</h1>
<div id="#content">
<p>Lorem ipsum dolor sit amet…</p>
</div>
<div id="#footer">Footer</div>
</body>
Для начала нужно указать, что минимальная высота body должна быть не менее 100%:
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 Удобно, не правда ли?
Получаем:
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;
}
Теперь осталось составить стили для заголовка, основного блока и футера.
Есть один маленький нюанс: так как мы хотим прижать футер к самому нижнему краю экрана, нам нужно знать заранее его (футера) высоту. Обычно это не является проблемой, так как в футере содержатся копирайты и несколько ссылок, и размер футера обычно заранее известен. Для заголовка высота не имеет значения (данный макет вытерпит любую разумную высоту ), но для удобства мы её всё же зададим.
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:
<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>
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…
Меня зовут Владимир, я программист-фрилансер, специализирующийся на Web-программировании и програмировании под Linux.
По совместительству занимаюсь администрированием LAMP/LNMP-серверов и техническим переводом.
также скажите или дайте линку, как поступить в этой ситуации для табличного способа
*применяется к любому селектору.Знак > означает, что, например, в записи
a > b,bдолжен быть непосредственным потомкомa.Я бы порекомендовал к прочтению следующие статьи:
Отлично!
А как сделать что бы в первом примере (зеленый) растягивался на всю высоту страницы, до footer’а?
Посмотреть пример 2
Если Вы уберёте лишний текст во втором примере, то получите то, что хотите от первого.
Визуально да. Но я имею ввиду растянуть именно #content между #header и #footer. Содержимое #content будет подгружаться динамически и надо чтобы #content не зависел от его высоты.
Во втором примере всё так и есть. Либо я неправильно понимаю, что Вы хотите.
В примере высота #content зависит от текста который у него внутри. Это видно когда текста меньше, чем высота окна браузера.
А Вам нужно, чтобы футер всегда был прикреплен к нижней границе окна?
Владимир, прошу обратить внимание - ключевое слово #content. Хидер и футер размещены отлично. Единственное, что мне хочется - когда размер данных в #content такой, что высота #content меньше размера браузера, то #content должен растягиваться от хидера до футера. Тоесть, в Вашем 1-ом примере, зеленый растянуть до футера, а не перекрасить красный в зеленый.
Ваван! Как же трудно было найти статью по этому вопросу! Все мега-гении интернета только какую-то нереальную демагогию врубают и все. А я ищу готовый рецепт, а не какую-то философию css. А тут - все ясно: контейнер(хедер-контент-футер). Я вставил в свой код, и - бах! Все работает. Обычно мне лень писать благодарности. Но не в этот раз. Спасибо!
Что этот чувак (tolich) от тебя хочет? Он, наверное сам и не понял)))). Наверное выкладывает нереальную демагогию на эту тему. На досуге. «Ключевое слово»! Наверное нереально умный чел))).
P.S.: Все подумают, что ты сам себе написал:)
P.P.S.:Спасибо!
Как же трудно было найти статью по этому вопросу! Все мега-гении интернета только какую-то нереальную демагогию врубают и все. А я ищу готовый рецепт, а не какую-то философию css. А тут - все ясно: контейнер(хедер-контент-футер). Я вставил в свой код, и - бах! Все работает. Обычно мне лень писать благодарности. Но не в этот раз. Спасибо!
(На случай, если первое сообщение не пройдет модерацию)
Если превратить id=”container” в class=”container” для многократного использования, то последующие блоки “container” перестают растягиваться на всю высоту окна, растягиваются только в зависимости от количества контента.