【CSS】フッターをページ下部に固定する方法

コンテンツの行数が多いページでは、フッターはページの下部に表示されますが
コンテンツ内容が少ないと、コンテンツとともにフッターが上に来てしまいます。

CSSを使って、フッターを常にページの下部に表示する方法を紹介します。

HTML

<div id="wrapper">
	<div id="contents">
		コンテンツ
	</div>
</div>
<div id="footer">
	フッター
</div>

CSS

* {margin:0;}

html,
body,
#wrapper {
	height: 100%;
	position: relative;
}
body > #wrapper {
	height: auto;
	min-height: 100%;
}
#contents {
	padding-bottom: 150px; /* フッターの高さと同じ値 */
}
#footer {
	position: absolute;
	bottom: 0px;
	width: 100%;
	height: 150px; /* フッターの高さ指定 */
}

前回（【CSS】要素を自由な位置に配置する方法）で紹介した自由配置の応用編です。
#contentsの padding でフッターの居場所を作ってあげて、
#footerの absolute で#wrapper内の一番下に指定することで下部に配置しています。