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

|

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

ポイントは「フッター以外の要素を囲むブロック要素」と「フッターを囲む要素」を作る事です。このブロック要素に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;/* フッターの高さを指定 */
}

このページに関連する記事

CSSの小技に関する記事(53)

参考サイト

お勧めCSS教本

Powered by Movable Type 4.21-ja

最近のブログ記事