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

CSSでフッターエリアを常にブラウザ下にフィットした状態で固定表示にする方法をご紹介します。

フッターエリアをブラウザの下固定に表示するCSSの記述例

※全体を囲ってるタグ（html・body・idWrap）の高さを100％にし、フッターエリア（#idFooterWrap）を下付き（bottom：0pxのposition:absolute）にします。

<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;
}
#idContents{
	width:600px;
	margin:0 auto;
}
h1{
	font-size:18px;
	font-weight:normal;
	text-align:center;
	padding-top:15px;
	line-height:1.2em;
}
p{
	line-height:1.4em;
	font-size:16px;
	text-align:center;
	padding:20px 0 0 0;
}
#idFooterWrap{
	height:80px;
	width:100%;
	background-color:#CCCCCC;
	position:absolute;
	bottom:0px;
	text-align:center;
}
-->  
</style>

CSSでフッターエリアをブラウザの下固定に表示するHTMLの記述

※id=”idFooterWrap”をフッターエリアとして固定表示します。必要に応じて変更して下さい。

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

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

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

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

　
※流用される場合は自己責任でお願いします。
　デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。