Как прижать футер к низу страницы

В этой статье пошагово показано, как прижать футер к низу страницы. Я думаю, этот метод самый простой и применяется наиболее корректно и чисто к существующим структурам HTML.

Этот метод решает следующие проблемы:
1) футер прижимается к низу страницы, если только другое содержимое не занимает всю высоту страницы;
2) работает в IE5 +, FF1 +, Opera7 +, Safari2 + практически везде;
3) что наиболее важно, это - чистый CSS.

Структура HTML

Для начала ознакомимся с общей HTML структурой нашего документа. У нас есть блок контейнер #container и внутри него блок #content , соответственно для контента. Стоит отметить, что футер будет располагаться под блоком #container, а не внутри него. Это важно. Кроме того это довольно просто:

HTML

            
<div id="container">
<div id="content"></div>
</div>
<div id="footer">My Sticky Footer</div>

‛Растягиваем" body

Во-вторых, растянем элементы (body, html и #container) на всю высоту окна браузера. Для того чтобы (#container) также растягивался на всю высоту окна браузера, а при переполнении блока становился больше указанной высоты – будем использовать свойство min-height. Однако это свойство не поддерживается браузером ie6, поэтому ниже приведено решение для ie6:

CSS

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

Расположение футера

В-третьих, установим футер сразу под контейнером, причем контейнер будет заполнять все окно браузера. Однако, нам нужен футер, который был бы виден в окне браузера, для этого сделаем отрицательное поле (margin). Чтобы быть уверенным в том, что футер виден, необходимо сделать высоту отрицательно поля равной высоте футера. Вот как это выглядит:

CSS

            
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
} 

Окончательные штрихи

Для того чтобы защитить содержимое нашей страницы от «наезда» на подвал, сделаем следующие:

CSS

          
      #content { padding-bottom: 3em; } 

Отметьте, что нижняя подложка равно высоте футера.

Также можете посмотреть демо, чтобы увидеть, как это работает. Буду рад комментариям по поводу этого метода.

2-й способ: прижать футер к низу страницы

Блокам html и body задаем высоту 100%, таким образом, наша страница растягивается на всю высоту окна браузера. Для блока #container укажем минимальную высоту 100%, а также свойства, необходимые для хака ie6; зададим блоку #container отрицательное нижнее поле равное высоте футера. Далее определим футер и блок #garant, который - внимание - предотвратит смешивание содержимого блока #container и футера.

HTML

            
<div class="container">
<p>Контент</p>
<div class="garant"></div>
</div>
<div class="footer">
<p>Текст в футере</p>
</div>
  

CSS

html, body {
height:100%;
}
.container {
min-height:100%;
height:auto  !important;
height:100%;
margin:0 auto -150px;
}
.footer, .garant {
height:150px;
}