CSS で "width: 100%; " と指定した要素の幅は何 pixel(s) でしょう？
答えはご存知の通り「包含されている要素の幅による」ですよね。（違ってたらどうしよう
では、それが body 要素に直接の子要素として配置されている要素だったら？
答えは「Web ブラウザ描画面の幅と同じ」でしょう。
さて、次の質問。Web ブラウザ描画面の幅って何 pixel(s) ですか？
もう「そんなの知るか！」って感じですよね（笑
そこで、もう少し限定して、"Web ブラウザはメジャーな物で、起動した時のウインドウの幅： 800px かつ，body はメジャーな Web ブラウザのデフォルトスタイル" とします。（徐々に本題に近づいてきましたよ。
答えは 800px … ではなくて、「800px 以下」です。「お気に入り」とかあるので。もっと考えた方は、ウインドウのボーダーやスクロールバーの分もあるから「800 px 未満」だぜ！って思われたかもしれません。しかし、正解！とは言えません。スクロールバーに関してはコンテンツの量（や CSS）に依存するので何とも言えませんが、ディスプレイの幅が 800px で最大化が初期状態で起動された場合や、Mac 環境ではボーダーレスです（ウフフ
よって、答えは「800px 以下」です。
この条件下で、再びこの質問。body 要素に直接の子要素として配置されている要素の幅を "width: 100%;" で指定したら、その子要素は何 pixel(s) でしょう？
答えは「800px 以下」です。
更に条件を追加して、ウインドウのボーダーやスクロールバーはない状態を仮定。
ここでやっと「800px」が答えになります。
と言う訳で、ここからが本題ですよ〜（遅すぎ？
さて、Web ブラウザ起動時の描画面の幅を 800px とすると、"width:100%;" は 800px ですが、同じ階層のコンテンツ合計幅が 800 px 以上であった場合、"width: 100%;" の幅はどうなるでしょう？
具体的には、以下のような場合の id="foo" 以外の div 要素の幅はどうなるでしょう？
<body>
<div id="hoge" style="width: 100%;>style="width: 100%;"</div>
<div id="foo" style="width: 900px;">style="width: 900px;"</div>
<div id="bar">初期値</div>
</body>
900px？
不正解。コレが罠です。（やっとキーワードが
確かにコンテンツ幅は 900px になってスクロールバーが出るように見えますが、実際には 100% は Web ブラウザの描画面の幅と同じです。この時、100% のボックスに背景色を指定していた場合、スクロールバーを動かすとどういう事が起こるでしょう？
そう、スクロールバーを動かすと背景なしの部分が現れます。コレはとっても不細工。
罠って言う程のことではないんですが、タイトルが集客の罠です（笑
それで、肝心の解決方法は "min-width: 900px;" を指定してやる事です。
それ、IE が対応してねーじゃん！とか思われる方も居るかもしれませんが、IE では元々この問題は起こりませんです、はい。
こんな感じです。
ちなみに、タイトルを「min-width を指定しよう」とかいうバレバレなものにすれば、記事がもっと短く…。
コメントする