横スクロールすると背景が切れる現象について

つい最近オープンしたサイトでの話。
「画面を小さくすると白くなる」と言われて何のことか分からなかったのですが、こういうことです。

1. 横スクロールバーが表示されるまでウィンドウ幅を縮める
2. 画面の外に隠れた領域を見るために横スクロールバーをドラッグする
3. すると、画面の外に隠れていた領域の背景がなくなる

背景色や背景画像を設定したヘッダやフッタをウィンドウ幅いっぱいに表示している場合にこの現象が発生します。

解決策は、width:100% を指定したボックス要素に min-width の指定を追加することです。

#footer {
  width: 100%;
  min-width: 1060px;
  /* （以下略） */
}

なお、IE6は min-width に対応していませんが、私の確認した限りIE6では上記の現象が発生しないため問題なさそうです。

こちらのサイトに動作デモと解決法が簡潔に記されていました。

• ブラウザの横スクロールしたら背景100%のヘッダやフッタが切れてしまう – DEPTHCODE

この方法が有効な理由については、こちらのサイトの説明が分かりやすかったです。

• CSSサンプルプログ: 横いっぱいに伸びる背景について