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

昔同じ問題に悩まされたことがあったのですが、これで解決しました。上記記事にもあるようにリンク先の記事が消えたら事なので、ポイントだけ引用することにします。
(追記)引用してみたら記事のほとんどが入ってしまった。なんか申し訳ない気分

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