▼EntryMore▼

HTML ソース

CSS ソース

どうやって実現しているかのポイントを説明します。
まず、html , body双方にheight: 100%を指定します。n

こうすることによって、ブラウザ領域いっぱいにhtmlとbodyの高さが確保されます。
こうしないと、htmlとbody要素は内包しているコンテンツの部分までしか高さが確保されません。n

次に、全体を囲んでいる containerへ、min-height: 100%を指定します。こうすることで、”最低でも”高さが 100%（つまりブラウザ領域いっぱい）になります。n

したがって、コンテンツ内容が 100% を超えた場合（ブラウザ領域の高さを超えた場合）でも自動で高さが伸びていく、というわけです。n

さらに、containerに対してposition: relativeを指定し、内包するfooterに対してposition: absoluteを指定、さらにbottom: 0を指定することでcontainer下部に固定配置されることになります。n

加えて、footer上部に位置するwrapに対して padding-bottom: 50px（ここでの数値は、フッターに設定している高さと同じ値を設定） を指定することで、フッターがコンテンツ部分にかぶさることを防いでいます。n

しかし、これの問題点として、min-heightに対応していない IE 向けに、ハックを使って IE にもmin-height （と同じような動作）を実現しています。この min-height 対策は以前に書いたのでそちらを参考にしてください。「2行追加するだけで、簡単にIE6でもmin-heightを実現する方法」n