CSSだけで実装する!短めページの隙間なしフッタ

こんにちは、AIのディレクターをしています伊藤です!
あまりコンテンツ量が少ないサイトを制作することはないのですが、この前久々にコンテンツ量の少ないページを制作することになりました。
そのときに迷って時間を食ってしまったのでアウトプットを兼ねて書きます。
書いとけばブログ見たら思い出せるし便利ですね!ということで。

CSS部分は以下のような形です。
*{
	margin:0 auto;
}

html{
	min-height:100%;
	position:relative;
}

body{
	margin-bottom:100px;
	background-color:#d0d0d0;
}

#header{
	min-width:100%;
	height:100px;
	background-color:#646464;
}

#footer{
	min-width:100%;
	bottom:0;
	height:100px;
	position:absolute;
	background-color:#646464;
}

htmlは以下のような形です。

<body>

	<div id="header">
		<p>ヘッダ内容です</p>
	</div>

	<div id="contents">
		<p>メインコンテンツ内容です。</p>
	</div>

	<div id="footer">
		<p>フッタ内容です。</p>
	</div>

</body>

コツとしては、ページ全体にフッターの高さと同じだけのマージンをとるということになるでしょうか。

そしてフッターをposition:absolute;bottom:0;を使って最下部に持ってきます。全体のmin-heightが100%なので、変な隙間がでないという感じですね。

IE9以降ならしっかりと表示されるのでなかなか便利です。

●以下のサイトを参考にさせていただきました。
[CSS]フッタの表示をコンテンツ量が少ない時は最下部に固定、多い時は成り行きにするシンプルなテクニック|コリス
http://coliss.com/articles/build-websites/operation/css/css-simple-sticky-footer-by-melissa.html

伊藤

伊藤

三重県で生まれ育ち、大学は毎日長久手市まで通っていましたが、就職に際して名古屋の地に引っ越してきました。AIではディレクション、コーディング、デザインなど、制作関連の色々なことを担当しています。