フッターを下部に固定して表示させる

通常ならば、コンテンツの多少でフッターが、はじまる位置はどうしても異なってしまいます。
しかし、デザインによっては、ページ下部にフッターを決まった位置に固定して表示したいケースも出てくると思います。 そのような場合もCSSで設定すればフッターを下部に固定することが可能です。

方法は色々あると思いますが、一例として、paddingプロパティとネガティブマージンで表示位置を固定させる方法をご紹介したいと思います。 この方法なら、コンテンツの内容が少ない場合はページ下部に固定表示され、コンテンツの内容が多い場合は、合わせて表示させれるので自然なフッターを演出することができます。

下記のサンプルのようにフッターを150pxとした場合、paddingやネガティブマージンに150pxを指定することで必ずフッターをページ下部に表示するようにしています。この方法ならIIE、Firefox、Safari、Google Chrome、Opera など多くのブラウザに対応しているので、汎用性もあります。

サンプルCSSコード

* {margin:0;padding:0;}
html, body, #wrap {height: 100%;}
body > #wrap {height: auto; min-height: 100%;}
#main {padding-bottom: 150px;} /* must be same height as the footer */
#footer {position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;}

/* CLEAR FIX*/
.clearfix:after {content: ".";
　　display: block;
　　height: 0;
　　clear: both;
　　visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

サンプルHTMLコード

<div id="wrap">
　　<div id="main" class="clearfix">
　　</div>
</div>

<div id="footer">
</div>

『CSS Sticky Footer』のサイトを参考にさせて頂きました。コードもダウンロードできるので、より正確なコートが欲しい場合はチェックしてみてはいかがでしょうか。

Stylesheet Designguide MENU

Copyright (C) スタイルシートデザインガイド All Rights Reserved.