css - 100% 幅の div のバグ - 全体に広がっていない

Question

これが私のコードの実行です：

http://jsfiddle.net/HMsKa/60/

かなり単純なコードですが、プレビューウィンドウを小さくして右にスクロールするとバグが見えます。ヘッダー バーとフッター バー (オレンジと青) は全体に伸びていません。

私はいくつかのことを試しましたが、修正できません。誰もこれに対する解決策を知っていますか?

Answer 1

ライブデモ

こんにちはmin-width、ページの本文で定義します

このように

cssこれをあなたに追加してstylesheet、デモを見てください

...............

body{
min-width:900px;
}

ライブデモ

Answer 2

ヘッダー バーとフッター バー (オレンジと青) は全体に伸びていません。

これは、width割り当てた宣言が異なるためheaderです。width: 100%;(現在表示されているビューポートの幅として計算された)#main要素とwidth: 900px;(フッターには幅が割り当てられていませんが、ブロック要素として、その幅は 100% です)デフォルト）

取得したいレイアウトに応じて、同じ幅 (100% または 900px) を使用してください。