GOODTABLE鎌倉オープン
GOODTABLE鎌倉オープン
2012.07.24

隙間を埋める!フッターをウィンドウ下部に固定する3つの方法

モモコ

こんにちは、モモコです。
ページを作っている際に、想定していたコンテンツ量よりも原稿が短く、フッターの下にブラウザとの隙間が空いてしまう事がありました。
このスカスカ感を埋めるべく、フッターをウィンドウ下部に固定する方法を調べたので備忘録も兼ねてご紹介します。

スカスカ

positionを使い、フッターをコンテンツ下部に固定する方法

【HTML】

<html lang="ja">
	<body>
		<div id="wrap">
			 <header>ヘッダー</header>
			 <div id="contents">コンテンツ</div><!-- contents -->
			 <footer id="footer">フッター</footer>
		</div><!-- wrap -->
	</body>
</html>

【css】

html,body{
     height:100%;
}
#wrap{
     width: 100%;
     position: relative;
     height:auto !important; /*IE6対策*/
     height: 100%; /*IE6対策*/
     min-height: 100%;
}
#contents{
     padding-bottom:140px; /*フッターの高さと同じ*/
}
#footer{
    height:140px;
     position:absolute;
     bottom:0;
}

html要素とbody要素の高さをブラウザ領域(ブラウザ内に表示されている分)まで確保すると、コンテンツ内容が領域を超えても自動で伸びていくようになります。
そして#wrapにposition:relativeを設定し、内包されているフッターをposition:absoluteとbottom:0で下部に固定。
またコンテンツと被らないようにフッターの高さと同じ分だけ#contentsにpadding-bottomを設定します。

これで高さが足りない時でも、フッターがウィンドウ下部に配置されるようになります。

詳細な説明は参考サイトをご覧下さい。

  • 1
  • 2