CSSでフッターをブラウザの下固定で表示する方法



フッターを常にブラウザにフィットした状態で下固定でにする方法です。
たまにリクエストがありやってましたが、その他にもやり方は色々あると思います。

<style type="text/css">
<!--
*{
	margin: 0;
	padding: 0;
}
html{
	height:100%;
}
body{
	height:100%;
}
* html div#idWrap{
	height:100%;
}
div#idWrap{
	width: 100%;
	margin:0px auto;
	position:relative;
	min-height: 100%;
}
body > #idWrap {
	height: auto;
}
h1{
	font-size:18px;
	font-weight:normal;
	text-align:center;
	padding-top:15px;
	line-height:1.2em;
}
#idFooterWrap{
	height:80px;
	width:100%;
	background-color:#CCCCCC;
	position:absolute;
	bottom:0px;
	text-align:center;
}
-->  
</style>

全体を囲ってるタグ(html・body・idWrap)の高さを100%にし、
フッタータグ(idFooterWrap)を下付き(bottom:0pxのabsolute)に
すれば良いのですかね。

2.HTMLの記述例

<body>
<div id="idWrap">
<div id="idContents">
	<h1>フッターをブラウザの下に固定表示します。</h1>
    <p>ブラウザを縦に伸ばして見てください。<br>
    フッターエリアが常に下に表示されます。</p>
</div><!--/idContents-->
<div id="idFooterWrap"><p>フッターエリア</p></div>
</div><!--/idWrap-->
</body>

CSSでフッターをブラウザの下固定で表示するデモ

SNS関連のボタンを表示させるJsプラグインだったり、
その他色々あるみたいですが個人的にはなるべくプラグインを
そのまま使うより自分で作るかまたは把握して作りたい感じです。