Sticky Footer — Прилипающий футер

Есть несколько способов реализовать футер, прилипающий к низу страницы (Sticky Footer), используя свойства CSS. Но многие из них прибегают к громоздким и неудобным хакам, или требуют много дополнительного HTML кода. Описанный здесь метод использует всего 15 строк CCS кода и почти не требует дополнительной HTML разметки. Также он отличается тем, что построен на валидном CSS коде. И, само собой, работает во всех популярных браузерах (IE5 и старше, FireFox, Safari, Opera и Chrome).

Прежде всего, вы можете посмотреть, как это работает. Здесь находится пример реализации описанного метода. Убедитесь в том, что он валиден и является кроссбраузерным.

Добавьте следующий CSS код в вашу таблицу стаилей. При этом обратите внимание, что отрицательное значение margin-bottom равно высоте .footer и .push. Это отрицательное значение должно быть равно полной высоте footer, включая какие-либо отступы или border последнего. Если не следовать этому принципу, то появится вертикальная полоса прокрутки. Она появится даже в том случае, если фактически контент будет помещаться на странице.

CSS код:

* {
	margin: 0;
}
html, body {
	height: 100%;
}
.wrapper {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin-bottom: -80px; /* Отрицательное значение высоты footer'а */
}
.footer, .push {
	height: 80px; /* .push и .footer должны быть одинаковой высоты */
	clear: both;
}

HTML код представлен ниже. Весь контент должен содержаться только внутри.wrapper и .footer. Внутри .push также ничего не должно быть, так как этот слой является скрытым элементом, прижимающим футер. Разумеется, все это не касаетс я элементов с абсолютным позиционированием. Они могут находиться где-угодно.

HTML код

<div class="wrapper">
	<div class="header">
		Header block
	</div>

	<p>Main content</p>
	<div class="push"></div>
</div>

<div class="footer">
	<p>Footer</p>
</div>

Учитывая то, что под IE6 верстают все меньше, можно привести селектор .wrapper к такому виду:

.wrapper {
	min-height: 100%;
	margin-bottom: -80px; /* Отрицательное значение высоты footer'а */
}

Метод останется рабочим для всех браузеров, кроме IE6 и меньше. Конечно, две строчки кода погоды не делают, но для педантов они могут показаться лишними.

На основе статьи CSS Sticky Footer