1カラムのCSSレイアウト

1カラムレイアウトというかヘッダー・メイン・フッターと段組みし、フッターをページ下部に表示したい場合があると思います。
メイン画面のページ量にもよりますが量が少ない場合、メイン部分とフッター部分がくっついてページの下のほうが空いてしまうことが多々あると思います。

フッターをページ下部に表示したい場合は「height:100%」のボックスを使って表示させることができます。

<style>
* {
    margin: 0;
    padding: 0;
}
html, body {
    height: 100%;
}
div#container {
    position: relative;
    margin: 0 auto;
    width: 800px;
    height: 100%;
    min-height: 100%;
    background: #cccccc;
}
body > div#container {
    height: auto;
}
div#header {
    height: 50px;
}
div#main {
    padding-bottom: 50px;
}
div#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50px;
}
</style>

<div id="container">
 <div id="header">ヘッダー</div>
 <div id="main">メイン</div>
 <div id="footer">フッター</div>
</div>

出力したイメージ↓（かなりアバウトですが...）

「height:100%」を使う際の注意点はhtmlとbodyにheight:100%を記述することくらいです。

min-heightやbody > #containerなどは各ブラウザへの配慮といったかんじですのでそういうものくらいでいいと思います。