フッターを固定で表示させる方法

コンテンツがスクロールバーが必要なほど多い場合は問題ないのですが、コンテンツが少ないと右図のようにフッターがブラウザの下部に表示されずに空きスペースができてしまい、見栄えが悪い場合があります。

その場合は、下記の方法でフッターを固定表示することができます。

positionとpadding-bottomを使ってフッターを固定する

html{
	height: 100%;
	overflow-y: scroll;
}
body{
	margin: 0;
	padding: 0;
	height: 100%;
}
#wrapper{
	position: relative;
	height: auto !important;
	height: 100%; /* for IE6 */
	min-height: 100%;
}
#contents{
	padding-bottom: 30px;
}
#footer{
	width: 100%;
	height: 30px;
	background-color: #eee;
	position: absolute;
	bottom: 0;
}


<div id="wrapper">
	<div id="contents">
		<p>本文</p>
	</div>
	<div id="footer">フッター</div>
</div>

サンプル画面

height:100%

html, bodyでheight:100%を指定し、ブラウザの高さの領域を最大まで確保します。
contentsとfooterを囲うwrapperでは、height: autoを!importantで指定し、min-height: 100%をしています。これにより最低でも画面100%の高さを確保、つまり最大の高さを確保します。
別途、IE6以下用にheight: 100%を指定します。

フッター分の高さをpadding-bottomで確保する

フッターの上にあるcontentsでpadding-bottom: 30pxを指定することで、フッターの分の高さの30pxを確保します。

フッターの表示位置を最下部に指定

#footerにposition: absoluteとbottom: 0を指定することで、画面の一番下に絶対位置で配置します。