Как прижать футер к «низу» окна браузера в CSS

XML&HTML&CSS | 03.04.2010 | Метки:

Такой вопрос приходится решать при создании шаблона вывода информационных страниц с переменным количеством информации.
Так как некрасиво наблюдать футер (если он есть) посередине страницы.

Судя по количеству вариантов решений находимых в поисковиках с этим вопросом столкнулся не только я. В заметке вариант, который заработал у меня в FireFox, Opera и InternetExplorer7 (8-ой в режиме совместимости, т.к. 6-го у меня нет).

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
		<title>Заголовок страницы</title>
		<style>
			#footer {clear:both;height:30px;margin:-37px 10px auto 10px;font-size:12px;border-top:2px solid grey;padding-top:5px !important;}
			#content {height:auto !important;margin:auto 10px;min-height:100%;}
			#clear {clear:both;height:40px;}
			body {height:100%;min-height:100%;}
			html {height:100%;}
			* {margin:0;padding:0;}
			h2 {margin:0px 0px !important;}
		</style>
	</head>
	<body>
		<div id="content">
			<br><h2>Заголовок контента</h2><br>
			<p>Информационная часть страницы</p>
			<div id = "clear">
			</div>
		</div>
		<div id = "footer">
			<p>Футер страницы</p>
		</div>
	</body>
</html>

Будет немаловажным заметить что этот пример у меня не работал до того как я прописал DOCTYPE (строка объявления версии HTML).
Также видимо браузеры встречая элементы типа <h2> (с margin по умолчанию) или <hr> (с заданной толщиной бордера) добавляют их высоту к общей высоте страницы, это имеет смысл учитывать при установки правила margin:-37px …; для футера (либо использовать обходные пути типа <br>).

Если вдруг не заработает или будут вопросы — вэлком в комменты.


Добавление комментария:

 css.php