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

AICスタッフ

# クリエイティブ

こんにちは、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