Автор: Paul Boag

Перевод: Sawarogu

Меня часто спрашивают о возможности создания страницы с футером который будет "прибит" к низу страницы в том случае, когда контент не заполняет всю страницу, но также он должен и нормально себя вести, когда содержимого достаточно. Такое требование к футеру далеко не ново; Оно встречалось мне на нескольких сайтах за эти годы, самый известный пример наверное 7 версия сайта Шона Имана. Посмотрите на раздел ‘Work’ (http://si7.shauninman.com/mute/) с включенным и выключенным JavaScript, чтобы понять суть эффекта. Я считаю что такое поведение, которое отлично смотрится при правильном применении, не так широко используется только потому, что существующие решения практически всегда используют JavaScript. Техника описанная в данной статье использует только CSS и поддерживается всеми современными браузерами, и протестированна вплоть до IE5.5.

HTML

<div id="container">
 <div id="content"></div>
 <div id="footer"></div>
 </div> 

CSS

*, body {margin: 0; padding: 0;}

 #container {display: block; position: absolute; min-height: 100%;}

 #content {display: block; margin-bottom: 3em;}

 #footer {position: absolute; display: block; bottom: 0; height: 3em }

 

Стили для IE6

body, #container {height: 100%;}

Как это работает

Как вы видите разметка и стили очень просты, давайте быстро разберем как это работает...

• #container имеет значение по высоте в 100% от размера окна браузера, для этого использован min-height и несмотря на то что IE6 не обрабатывает min-height, он обрабатывает его точно так же. #container должен быть абсолютно позиционирован иначе работать не будет.
• #footer позиционируется абсолютно внизу контейнера #container
• #content имеет нижний отступ равный высоте блока #footer что позволяет избежать их перекрытия.

Простота и надежность этой техники позволяют применять ее повсеместно, и единственной преградой являются браузеры IE6 и ниже, для них вам понадобится точно устанавливать для любых дополнительных блоков высоту в 100%. Для примера в такой разметке:

<div id="extraContainer">
 <div id="container">
 <div id="content"></div>
 <div id="footer"></div>
 </div><br/>
 </div>

body, #extraContainer, #container {height: 100%;}

Заключение

Это простое, но довольно изящное решение, поможет вам устранить проблему с футером и даже если оно может не подойти к какому то сайту, то думаю оно вам поможет в других случаях.