Как прижать футер к низу окна браузера.

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

Для того, чтобы привязать футер к низу экрана, необходимо знать его высоту (пусть будет 50px).  Далее задаем элементам html и body высоту 100% и убираем отступы. Контент пишем в блок (присвоим ему id = "content") и помещаем в контейнер с относительным позиционированием (присвоим ему id="container"), а футер в блок высотой 50 px, также с относительным позиционированием и расположим его после контейнера.

Сейчас у нас появилась полоса прокрутки, а футер располагается ниже нижнего края окна. Нам нужно его приподнять на его высоту. Присваиваем ему margin-top: -50px, а если футер у Вас с рамкой, то поднимать футер нужно на высоту футера + ширина рамки.

Теперь, если контента мало, футер все равно будет прижат к нижней части экрана. А если много? Смотрим и ужасаемся... Контент залез под футер... Чтобы это исправить, достаточно блоку "content" указать отсуп: padding-bottom: 50px.

Вот листинги:

HTML

<body>
   <div id="container">
      <div id="content">Контент</div>
   </div>
   <div id="footer">Футер<div>
</body>

CSS

html, body {
   margin: 0;
   padding: 0;
   height: 100%;
}
#container {
   min-height:100%;
}
#content {
   padding-bottom: 50px;
}
#footer {
   height:50px;
   margin-top: -50px;
}

Для уродца IE6 необходимо применить хак или условный коментарий, поскольку он не понимает свойства min-height.

Условный коментарий:

<!––[if lt IE 7]>
    <style type=”text/css”>
      #container {
         height:100%;
      }
   </style>
<![endif]––>

Хак:

Поскольку IE6 обрабатывает !important с ошибкой, этим можно воспользоваться: все браузеры применят height:auto, а IE6 последнее значение height - 100%, что нам и нужно.

#container {
   min-height:100%;
   height:auto !important;
   height:100%;
}

Но не только IE6 ведет себя не так как надо, но и Opera 9.xx. При открытии страницы опера отображает наш футер сразу после контента, а не снизу окна, хотя после изменений размера окна оперы футер встает туда, куда мы и задумали. Этот баг решается очень просто, с помощью тега link: либо мы выносим стиль в отдельный файл загружаем его в теге link, либо оставляем в заголовке документа, но после описания стиля пишем все тотже тег link, указав в параметре href несуществующий файл. Я поступил вот так:

<link rel="stylesheet" type="text/css" href="hack for opera">

Заметьте, что если в параметре href ничего не указать, этот хак не сработает.

Вот вроде и все. Футер привязан к низу экрана, контент не прячется за ним и все правильно отображается во всех популярных браузерах.