コンテンツの内容が少なくても、常に下部にフッタを配置させるための方法。ちなみに Safari とマック IE では動作しないっぽい。
実際にサンプルを見てみれば分かりますが、ウィンドウを下方に広げても、フッタは常に下部に張り付いたままな筈です。また、ウィンドウを上部に縮めていってもコンテンツ部分の所でピタッと止まり、それ以上は移動しません。
html と body への指定
サンプルのソースを大雑把に分けると下記のような構造になっています。
<div id="container">
<div id="contents">
<div id="header">ヘッダ</div>
内容
</div>
<div id="footer">フッタ</div>
</div>まず、html と body の高さを 100% と指定しておきます。
container への指定
次に、全体を囲っている #container に下記を指定します。ポイントは、相対位置指定すること。
#container {
width: 100%;
background: #eeffcc;
position: relative;
height: 100%;
min-height: 100%;
}min-height は IE 未対応ですが、height: 100% で大丈夫。逆にFirefox などのモダンブラウザの場合、ウィンドウを縮めていくとフッタがコンテンツ部分で止まらないので、下記のように IE 未対応の子供セレクタを使って auto と指定。
body > #container {
height: auto;
}contents への指定
内容を含む #contents には、フッタに指定している高さの分（サンプルは 50px）だけ、padding-bottom を指定。
#contents {
padding-bottom: 50px;
}footer への指定
下部のフッタへ指定する際のポイントは、絶対位置指定して bottom: 0; とすること。
#footer {
width: 100%;
background: #ccffaa;
position: absolute;
bottom: 0;
height: 50px;
}以上で完了。実際にこの方法を取り入れる際の注意点は、内容を含むコンテナ部分と下部のフッタ部分は別のブロックになっている必要があるということ。コンテナ内にフッタがある場合は動作しません。
Comments
> min-height は IE 未対応ですが、
一応対応はしておるのですが、
こんな対応状況です。
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/properties/minheight.asp
なんだかなぁ。。
うぉっと、IE は一部対応ってのが正しかったっすね。
はじめまして。ぺんぎんと申します。
いつもこのブログを楽しく拝見させていただき、かなり勉強させてもらっています。
突然で恐縮なのですが質問があります。
> ちなみに マック IE では動作しないっぽい。
とのことですが、「動作しない」とはどういうことでしょうか？
動的なフッタにならないということなのか、それとも表示崩れまくりなのか…。
このサンプルを応用させてもらおうと思っているのですが、当方Win使いのためMacでの動作確認ができません。
もしよろしければ、ご教授くださいませんでしょうか。
よろしくお願いします。
#こんな古い記事にコメントしてすみません。
>>こんな古い記事にコメントしてすみません。
いえいえ、全然大丈夫っすよ。
さて、マック IE で動作しないって件ですが、大幅に表示が崩れるってことないです。実際に、スクリーンショットを置いておきます。
http://www.lucky-bag.com/images/footer_image_mac_ie.png
ただ、水平スクロールバーが表示されて、どれだけウィンドウを広げようが解消されません。水平にスクロールすると、白くなってるって感じです。
早々にお返事いただきありがとうございます。
しかもスクリーンショットまで撮っていただいて恐縮です。
> ただ、水平スクロールバーが表示されて、どれだけウィンドウを広げようが解消されません。
あれれ、本当だ。
#footer と #container の幅指定が100%にしてあるのがまずいんでしょうね。
幅を px などで決め打ちしたら解消されるのかな？
ともかく、大幅に表示が崩れるのではないとわかって安心しました。
ありがとうございました。
Operaもだめですね。
下のfooterが表示されないのが…
あれ、footer が表示されないのですか？
ウィンドウズ版の 7.54、8.02、8.5 で確認しましたが、一応大丈夫っぽいです。
ちなみにバージョンはいくつでしょうか。
1年半前の記事に対して恐縮ですが、参考にしている方もいるかと思うのでコメントさせていただきます。
#contentsの中をfloatで段組みしていると、Fx等のブラウザで「ウィンドウを縮めていくとフッタがコンテンツ部分で止まらない」状況になります(#contents に高さが無いため)。
この場合は#contentsに overflow: auto; を指定することで回避できました。
>>hitsuki さん
コメントありがとうございます。
ただ、overflow で解決する方法はマック IE をスコープとしている場合には、ちょっと面倒な場合があるようですね。
IE であれば zoom プロパティ、その他 content生成できるブラウザであれば、生成物で clear する方法をとった方が良いかもしれません。