Прилипающий к низу футер

Долгое время я использовал вот такой способ заставить подвал прилипнуть к низу страницы. Вот в чем суть этого метода.

Имеем следующий html-код:

<div id="wrapper">
  <div id="header">Header</div>
  <div id="content">Content</div>
  <div id="footer">Footer</div>
</div>

Вот что записываем в css:

1. Элементам html и body задаём height: 100%;.
2. Элементу wrapper задаём min-height: 100%; position: relative;.
3. Элементу footer задаём position: absolute;. Из-за абсолютного позиционирования ширина блока автоматически изменилась на auto. Исправляем это с помощью width: 100%;. Позиционируем блок внизу родительского элемента — bottom: 0;. Задаём блоку фиксированную высоту.
4. Чтобы footer не налазил на содержимое блока content, добавляем блоку content нижний padding равный высоте блока footer.

Но сегодня я подсмотрел, на первый взгляд, более изящное решение. Вот готовый пример.

HTML-код:

<div id="wrapper">
  <div id="header">Header</div>
  <div id="content">Content</div>
</div>
<div id="footer">Footer</div>

Вот что записываем в css:

1. Как и в первом случае, элементам html и body задаём height: 100%;.
2. Элементу wrapper задаём min-height: 100%;, но на этот раз никак не позиционируем его.
3. Элементу footer задаём фиксированную высоту, а затем задаем ему отрицательный верхний margin равный высоте этого элемента.
4. Как и в предыдущем примере чтобы footer не налазил на содержимое блока content, добавляем блоку content нижний padding равный высоте блока footer.

Таким образом, мы избавились от лишнего позиционирования двух блоков. Оба способа кроссбраузерны.

Clearfix

Я был в восторге от нового метода очистки потока от float'ов, с которым познакомился. Узнал я о нём из статьи «Clearing floats: clearfix vs overflow. Недостатки и достоинства обоих подходов».

До этого я знал два основных способа очистить поток:

• С помощью задания overflow: hidden элементу, внутри которого мы хотим очистить поток. overflow: hidden создаёт отдельный контекст форматирования. Недостатком этого метода является то, что если нам понадобится вынести какой-то блок за границы контейнера с overflow: hidden, то этот блок не будет виден.
• С помощью <div class="clear"></div>. У класса .clear в стилях задаём clear: both. В этом методе мне не нравилась необходимость использования лишнего пустого div'а, что бьёт по семантике.

А вот в чем заключается новый метод. Элементу, внутри которого мы хотим очистить поток, в стилях мы прописываем:

.clearfix { zoom: 1 }   /* создаем новый контекст форматирования для IE6 и 7 */
.clearfix:after {
  content: "";
  clear: both;
  display: block;
  width: 0; height: 0;
  overflow: hidden;
  font-size: 0;
}

Т.е., как мы видим, в данном методе мы используем псевдо-класс :after. В комментарие к топику можно найти ещё более упрощенную версию конструкции, которая, как мне кажется, вполне удачно справится с задачей в большинстве случаев:

.clear:after {
  content: "";
  display: block;
  clear: both;
}
/* И не забываем про hasLayout для IE */

Этот метод обладает одним очевидным приимуществом перед overflow: hidden, т.к. позволяет выносить дочерние элементы за границы родительского. В общем, при выборе какой же из методов использовать — overflow: hidden или .clear:after { }, я бы вам рекомендовал прислушаться к совету Вадима Макеева и «пользоваться связкой overflow:hidden + zoom:1, а в случаях, когда что-то нужно вытащить из контейнера, использовать dot-clearing» (dot-clearing — это тот самый новый способ, о котором и идёт речь в статье).

Не забываем о том, что IE7 и ниже не поддерживает псевдоклассы :after и :before. Для очищения потока в этих версиях браузера нужному блоку мы присваиваем hasLayuot, что создаёт новый контекст форматирования. Таким образом для IE7 и 6 мы выравниваем поток с помощью hasLayout, для остальных браузеров мы выравниваем поток с потощью clear: both — и это не одно и тоже! Рекомендую разобрать вот этот пример, в котором метод очистки потока с помощью псевдокласса :after приводит к разному результату в IE7 и ниже и в остальных браузерах.

Больше информации вы найдёте в статье «How To Clear Floats Without Structural Markup» на Position Is Everything.