html / zen-codingしてね

div#wrap>(div#top>div.inner)+(div#header>div.inner)+(div#contents>div.inner)+(div#footer>div.inner)

css

html, body { height:100%; }
.inner { width:780px; margin:0 auto; }/*センタリング用の要素*/
body { min-width:780px; }/*固定幅と同じだけのmin-widthを指定*/
#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

どうですか、ブラウザ幅を縮めて横スクロールバーを表示させて右にズラしても(長い;;;)背景は表示されていますか?

min-widthを指定する要素とIE6

bodyの他に背景を指定した要素全部(#top,#header,#contents,#footer)にmin-widthを指定してたけど、よくよく考えたらbodyだけで大丈夫ぽい。
IE6はmin-widthが効かないけどそもそも背景が切れないという「ええ!あんなに大きな地震だったのに目が覚めなかったのかい?」みたいな感じ。