動的サイトで画面の下部にフッターを表示する事は非常に困難です。
さまざまなパターンを想定してフッターを設定することになります。
コンテンツ領域がブラウザの高さより高い場合
この場合、通常の方法で問題なく表示できます。
ただし、コンテンツ領域がブラウザの高さより低い場合、画面下部に大きな余白が発生します
コンテンツ領域がブラウザの高さより低い場合
この場合は、高さ100%のボックスを作成する方法を使用して、画面に対してheight100%のボックスを作成して、postionを利用して画面下部にフッターを持ってくることで、表示が可能になります。
ただし、この方法ではIE6以外のブラウザでは、コンテンツ領域がブラウザの高さより高い場合、フッターが初期表示の際の下部に表示されてしまし、スクロールで自由に動いてしまいます。
コンテンツの中身が決まっていたら、正しく表示される方を利用すればよいのですが、動的サイトの場合、コンテンツの内容が決まっていないので、どちらかを選ぶことができません。
その場合は以下のようなcssで実現可能です。
html,
body{
height:100%;
margin:0;
padding:0;
}
div#continer{
background:#39FF6B;
position:relative;
min-height: 100%;
}
* html div#continer {
height:100%;
}
div#main{
height:1000px;
padding-bottom:1em;
}
div#footer{
background:#DEFF4A;
position:absolute;
bottom:0;
width:100%;
}
div#continerのheightのデフォルトの値はautoなので、何も指定しなければコンテンツ領域にあわせて拡張されます。
次にdiv#continerに対してmin-height: 100%;を設定します。
これによりIE6以外のブラウザは、コンテンツが少ない場合でも高さ100%で表示されます。
次にスターハックを利用してIE6に対してheight:100%を設定します。
IE6はコンテンツが多い場合でもheight:100%でコンテンツ領域を拡張するバグがあるためこれを利用します。
最後にフッター分の領域をdiv#continer内に確保する為、div#mainに対して padding-bottom:1em;を設定しています。
伝統的な手法ですがIE7用に手を加えているので参考にしてください。