コンテンツ量が少なくてもデザインくずれを起こさないようにフッターを固定する

2010年2月27日 08:18 | 個別ページ

ホームページのデザインによっては、コンテンツ部分が少ないとフッターの下に余白ができてかっこ悪くなる場合があります。そのような場合には、フッターを固定する事でデザインのくずれを防ぐことができます。

ポイントは｢フッター以外の要素を囲むブロック要素｣と｢フッターを囲む要素｣を作る事です。このブロック要素にpading-bottomで、フッター分の余白を設け、フッターをposition:relativeで位置を決めます。ここで重要な事はフッターの縦の大きさは固定でなければならないということです。

サンプル

当サイトで配布しているCSSテンプレート｢pub002｣をフッター固定にしてみました。

サンプルはこちらから

動作確認

Firefox3.5.8、Google Chrome 4.0、Safari 4.0.4、Opera 10.10、IE6 for Windows XPです。

(X)HTMLコード

<div id="top">
   <div id="header"></div><!-- header end -->
   <div id="contents">
      <div id="main"></div><!-- main end -->
      <div id="sub"></div><!-- sub end -->
   </div><!-- contents end -->
</div><!-- top end -->
<div id="footerWrap">
   <div id="footer">
      <div id="totop"></div>
      <div id="footerMenu"></div><!-- footerMenu end -->
   </div><!-- footer end -->
</div><!-- footerWrap end -->

CSSコード

/* ========FOOTER FIX======== */
* {
   margin:0;
}

html,
   body,
   div#top {
   height:100%;
}

body > div#top {
   height: auto;
   min-height: 100%;
}

div#contents {
   padding-bottom:150px;/* フッターの高さと同じ値にする */
}

div#footerWrap {
   position:relative;
   margin-top:-150px;/* フッターの高さと同じ値にする */
   height:150px;/* フッターの高さを指定 */
}