Lucky bag::blog: フッタを常に下部に配置

個別記事

前後の記事

フッタを常に下部に配置

この記事が属するカテゴリー: CSS

コンテンツの内容が少なくても、常に下部にフッタを配置させるための方法。ちなみに ~~Safari と~~マック IE では動作しないっぽい。

footerサンプル

実際にサンプルを見てみれば分かりますが、ウィンドウを下方に広げても、フッタは常に下部に張り付いたままな筈です。また、ウィンドウを上部に縮めていってもコンテンツ部分の所でピタッと止まり、それ以上は移動しません。

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;
}

以上で完了。実際にこの方法を取り入れる際の注意点は、内容を含むコンテナ部分と下部のフッタ部分は別のブロックになっている必要があるということ。コンテナ内にフッタがある場合は動作しません。

2005-04-22T19:18:31+09:00 | コメント (9) | トラックバック (0) |

トラックバック

このエントリーのトラックバックURL:: http://WWW.lucky-bag.com/cgi/mt/mt-tb.cgi/215

"フッタを常に下部に配置"へのトラックバックはまだありません。

ばあどさんからのコメント: > min-height は IE 未対応ですが、
一応対応はしておるのですが、
こんな対応状況です。
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/properties/minheight.asp
なんだかなぁ。。; 2005年04月25日 10:04

e-luck さんからのコメント: うぉっと、IE は一部対応ってのが正しかったっすね。; 2005年04月25日 13:59

ぺんぎんさんからのコメント

はじめまして。ぺんぎんと申します。
いつもこのブログを楽しく拝見させていただき、かなり勉強させてもらっています。

突然で恐縮なのですが質問があります。
> ちなみにマック IE では動作しないっぽい。
とのことですが、「動作しない」とはどういうことでしょうか？
動的なフッタにならないということなのか、それとも表示崩れまくりなのか…。

このサンプルを応用させてもらおうと思っているのですが、当方Win使いのためMacでの動作確認ができません。
もしよろしければ、ご教授くださいませんでしょうか。
よろしくお願いします。

#こんな古い記事にコメントしてすみません。

2005年08月27日 18:28

e-luck さんからのコメント

>>こんな古い記事にコメントしてすみません。
いえいえ、全然大丈夫っすよ。
さて、マック IE で動作しないって件ですが、大幅に表示が崩れるってことないです。実際に、スクリーンショットを置いておきます。
http://www.lucky-bag.com/images/footer_image_mac_ie.png

ただ、水平スクロールバーが表示されて、どれだけウィンドウを広げようが解消されません。水平にスクロールすると、白くなってるって感じです。

2005年08月27日 22:59

ぺんぎんさんからのコメント

早々にお返事いただきありがとうございます。
しかもスクリーンショットまで撮っていただいて恐縮です。

> ただ、水平スクロールバーが表示されて、どれだけウィンドウを広げようが解消されません。
あれれ、本当だ。
#footer と #container の幅指定が100%にしてあるのがまずいんでしょうね。
幅を px などで決め打ちしたら解消されるのかな？

ともかく、大幅に表示が崩れるのではないとわかって安心しました。
ありがとうございました。

2005年08月28日 00:12

floral さんからのコメント: Operaもだめですね。
下のfooterが表示されないのが…; 2005年10月13日 17:41

e-luck さんからのコメント: あれ、footer が表示されないのですか？
ウィンドウズ版の 7.54、8.02、8.5 で確認しましたが、一応大丈夫っぽいです。
ちなみにバージョンはいくつでしょうか。; 2005年10月13日 19:18

hitsuki さんからのコメント

1年半前の記事に対して恐縮ですが、参考にしている方もいるかと思うのでコメントさせていただきます。

#contentsの中をfloatで段組みしていると、Fx等のブラウザで「ウィンドウを縮めていくとフッタがコンテンツ部分で止まらない」状況になります(#contents に高さが無いため)。

この場合は#contentsに overflow: auto; を指定することで回避できました。

2007年05月23日 16:20

e-luck さんからのコメント: >>hitsuki さん
コメントありがとうございます。
ただ、overflow で解決する方法はマック IE をスコープとしている場合には、ちょっと面倒な場合があるようですね。
IE であれば zoom プロパティ、その他 content生成できるブラウザであれば、生成物で clear する方法をとった方が良いかもしれません。; 2007年05月24日 21:20

コメントしてください

コメント内ではタグは一切使えません。コメント内にてタグを表記したい場合は、お手数ですが、文字実体参照を利用して < を < 、> を > とそれぞれ置き換えてください。

Lucky bag::blog