フッターを常に下に表示する方法

備忘録として。

<div id="container">
<div id="contents">
<p>説明文章を書くのが面倒でやった。今は反省している。不親切で申し訳ない。</p>
<!-- END contents --></div>
<div id="footer">
<p>Copyright (C) 2009 magicalremix. All Rights Reserved. </p>
<!-- END footer --></div>
<!-- END container --></div>

CSSは続きからどうぞ。

html {
	height: 100%;
}
body {
	height: 100%;
	text-align: center;
}
body > #container {
	height: auto;
}
#container {
	position: relative;
	width: 500px;
	height: 100%;
	min-height: 100%;
	margin: 0 auto;
	text-align: left;
}
#contents {
	padding: 10px;
	padding-bottom: 100px;
}
#footer {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 100px;
}

ポイント

• html と body と #container の height: 100%; と body > #container {height: auto;}
• #container の position: relative;
• #contents の padding-bottom: 100px;
• #footer の position: absolute; と height: 100px;

要は、フッターを浮かせて、フッター分の余白をとった #contents ボックスにのせているわけです。
で、高さが100%だから常に下に表示されるのです。
内容物が少なくて、フッターの位置が高くて見た目かっこ悪い、という場合に重宝します。