フッターを画面の下に表示
2007/07/11修正
IE7に対応するためにスターハックを追加。それに伴いサンプル・解説も変更
フッターは画面の下にピッタリくっつけておきたいという要望は意外とあるようです。 でもテーブルもフレームも使わないとなると、なかなか難しい。
今回紹介するのは、「height100%のボックス」のテクニックを拡張したこれを実現する方法です。
テクニック使用後
ウィンドウのサイズを変えてもフッターは常に画面の下にあることを確認してください。
やり方
１：HTMLを書く
HTMLはこんな感じになります。
<body>
<div id="container">
<div id="main">
<h1>フッターを画面の下に表示サンプル</h1>
<p>
フッターを画面の下部に表示したいという要望は意外と多いようですね。
このテクニックを使えば、フレームを使わなくても実現できちゃいます
！</p>
・・・略
</div>
<div id="foot">
©きくちゃん All Rights Reserved mail : webstudio-kic@stylish-style.com
</div>
</div>
</body>
HTML解説
ID="container"ボックスの中に、ID="main"ボックスとID="foot"ボックスが入っています。この入れ子関係が重要です。
２：スタイルシートを書く
ポイントとなるスタイルシートはこんな感じになります。これ以外はお好みで追加できます。
html{
height:100%;
}
body{
height:100%;
}
* html div#container{
height:100%;
}
div#container{
width: 80%;
margin:0px auto;
position:relative;
min-height: 100%;
}
body > #container {
height: auto;
}
div#main{
padding-bottom:30px;
}
#foot{
position:absolute;
bottom:0px;
height:30px;
width:100%;
}
CSS解説
今回のポイントは、#containerボックスを作成した点と、#footをposition:absolute;で配置した点にあります。
まずheight100%ボックスのテクニックを使って#containerボックスを作成。 このときposition:relative;を忘れないようにします。
続いて#footボックスをposition:absolute;とbottom:0px;を使って#containerボックスと底辺が重なるように配置。内容が少ないページならこれだけでフッターが画面の下部に表示されます。
しかし、#mainボックスの内容量が増えてくると#footボックスが重なってしまいます。これを回避するために#mainに padding-bottom:30px;（値は#footのheightの値と同じ）を指定します。これにより#mainの下に余白が出来るので#footと重なっても問題が起きません。
これによりどんな状況でもフッターが画面の下部にくるようになります。
使いこなすための＋α
少々込み入ったCSSの仕組みを解説をします。
IE7/firefoxの場合
min-height: 100% と height: auto;で、制御しています。#mainの内容が少ないときはmin-heightの機能によって#containerの高さをに１００％にし、#mainの内容が多いときはheight:auto;によって#conteinerの高さを拡張するすように設定。これで万事OKなわけです。
IE6の場合
IE6にはボックスのサイズに合わせた高さの自動拡張、min-heightと子孫セレクタの無視という特徴があります。 min-heightの代わりをするためのスタイルとしてスターハックで指定したheight:100%;と自動拡張機能を生かすために子孫セレクタを利用してheight:auto;を指定してIE6に対応させています。