コンテンツの高さが少なくてもフッターをブラウザ下部に表示させる

ブラウザの高さに対してコンテンツ量が足りない時、
フッターの下に隙間が空いちゃって、薄っぺらい感じになっちゃうのを回避したい。

つまり、コンテンツの中身が足りない時はフッターをブラウザ(ウィンドウ)下部に固定したい。

DEMO / コンテンツ量が少ないページでも、フッターをブラウザ下部に表示させるテスト。

試してみたhtml構造

[html classname=”html-sh”]div#wrap>div#top+div#header+div#contents+div#footer[/html]

指定したcss

[css classname=”css-sh”]html, body { height:100%; }
#wrap { position:relative; min-height:100%; background:#f33;/*確認用*/}
#contents { padding:1em 0 3em;/*コンテンツとフッターの位置調整*/ }
#footer { position:absolute; bottom:0; left:0; width:100%; height:3em; line-height:3em; }[/css]

全体を包むdiv#wrapの最低限確保する高さを100%にして
#footerをbottom:0に絶対配置。

これで問題ないかな？
なにか見落としてる気がしてならない。

出来たら#wrapのheightを100%にしたいんだけど
そうするとスクロールした時に#footerが移動しちゃう。

あと各ブロック毎に横幅いっぱいの背景を指定するのに
[text]div#wrap>div.inner[/text]みたいにした。
ソース見づらい。