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

フッターを常にブラウザにフィットした状態で下固定でにする方法です。

1．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の記述例

<div id="idWrap">

<div id="idContents">

<h1>フッターをブラウザの下に固定表示します。</h1>

    
ブラウザを縦に伸ばして見てください。
    フッターエリアが常に下に表示されます。
</div>
<!--/idContents-->

<div id="idFooterWrap">
フッターエリア
</div>

</div>
<!--/idWrap-->

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

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