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


隙間を埋める!フッターをウィンドウ下部に固定する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を設定します。

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

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

html要素とbody要素に背景色を指定する

【css】

html{
     background-color:#333333; /*フッターの色を指定*/
}
body{
     background-color:#ffffff;
}

必要な記述はこれだけです。
あとはお好みでフッターの背景色と合わせたり、グラデーションを指定して端の色と合わせたりすると綺麗ですね。
ただ、あまりにもコンテンツが少ないと、画面の殆どが背景色で埋まるのが難点です…。

javascriptを使用する方法

【HTML】

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

head内でjsを読み込ませ、フッター部分にid=”footer”を指定すれば自動でウィンドウの一番下にフッターを配置してくれます。
footerFixed.js」は必要な記述が少なく、フッターを固定するjsの中で特に使いやすかったのでオススメです。

この記事を書いた人

モモコ
モモコ デザイナー 2010年入社
デザイナーのモモコです。ジャンプは単行本派です、よろしくお願い致します。

こちらもおすすめ

最強のCSS設計 チーム開発を成功に導くケーススタディ

最強のCSS設計 チーム開発を成功に導くケーススタディ

  • 著者堀口 誠人
  • 価格¥ 2,376(2015/11/05 15:57時点)
  • 出版日2015/10/24
  • 商品ランキング12,388位
  • 単行本208ページ
  • ISBN-104797384557
  • ISBN-139784797384550
  • 出版社SBクリエイティブ