footer コンテンツがあまりないときでもフッターを下にくっつけるcssとjavascript

2015-06-17

ヘッダーやコンテンツ、フッターがあるサイトでコンテンツの中身が数行だったりするとフッターが宙に浮いた感じになってどうも見栄えが悪い時ってありますよね。
お問い合わせの送信完了ページとか。

そんな数行しか無いコンテンツページでも、フッターを下にくっつけて表示させる方法。by cssとjavascriptで。

基本HTML

<div id="wrapper">
    <div id="header">ヘッダー</div>
    <div id="content">コンテンツ</div>
    <div id="footer">フッター</div>
</div>

CSS

#container{
	text-align: center;
}
#header{
	height:50px;
	background:#ccc;
	text-align: center;
}
#footer{
	height:80px;
	background:#333;
	color:#fff;
}

見た目はこんな感じに

cssでフッターを下付きにする

html,body{
	height:100%;
	margin:0;
}
#container{
	position: relative;
	min-height:100%;
	height:auto !important;
	height:100%;
	text-align: center;
}
#header{
	height:50px;
	background:#ccc;
	text-align: center;
}
#content{
	padding-bottom:80px; /* フッターの高さ分　*/
}
#footer{
	position: absolute;
	bottom:0;
	width:100%; /* width指定しないと幅確保されない*/
	height:80px;
	background:#333;
	color:#fff;
}

ポイントは、

• html,bodyをheight:100％
• ラップする#containerに高さheight:100％,min-height:100%のほか、ブラウザを縮めた時にコンテンツの高さまできたら自動的に止まるようにheight:auto!important;を指定
• #footerでposition:absolute;を使うため、position:relativeを設定
• #footerはposition:absolute; でbottom:0;に
• position:absoluteを指定するとwidthがクリアされてしまうのでwidth:100%;を指定
• #contentにフッターの高さ分の余白を指定

完成

demo

javascript でフッターを下部に固定する

CSSがめんどくさいな～という場合は、javascriptもありました。
こちらもとっても便利です。

footerをウィンドウ下部に固定する『footerFixed.js』
http://blog.webcreativepark.net/2007/11/16-012253.html

javascriptを読み込んで、固定したい要素に#footerをつけるだけ。

<script type="text/javascript" src="./footerFixed.js"></script>

状況によって使い分けたいと思います！