html

div#wrap>div#top+div#header+div#contents+div#footer

css

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

確認したブラウザ

  • IE / 6-8
  • safari / 5.0.2
  • google chrome / 6.0.472.63
  • Opera / 10.62
  • Firefox / 3.6.10

どうですか、フッターは下部に表示されてますか？

それと、ヘッダーとフッターの背景を横幅いっぱいにする方法。

横幅100%の背景はdivを入れ子にするだけ？
背景を表示させる為だけの<div>ってイメージがよろしくないけど。