ページ下部にくっつくフッターのCSS

以前作った レコメガール のように、ページ下部にくっつき、ウィンドウサイズに合わせて可変するフッターのサンプルです。

可変フッターサンプル

position: absolute と bottom だけだと、ウィンドウの縦幅が狭いときは上のコンテンツにフッターがかぶってしまうことがあります。
HTML5用に !doctype html と宣言するとdivをheight 100% としてもウィンドウの縦幅いっぱいにdivが拡がらないので、htmlとbodyにheight 100% を指定し、min-heightで最小幅を指定することで、ある程度の縦幅があるときはウィンドウの大きさに合わせて可変し、縦幅が狭いときは可変しないフッターを実装することができます。

----------------
html,body {
	height:100%;
}
#wrap {
	height:100%;
	min-height:300px;
	position: relative;
}
#footer {
	position: absolute;
	width:100%;
	height:40px;
	bottom:30px;
	background-color: #999;
}
----------------

※IE6など、古いブラウザではmin-heightは実装されておらず、下記のような方法で対応する必要があります。
【参考】IE で min-width を指定する方法 – lucky bag