-3

私は非常に単純に見える何かに問題があります。

これが取引です。

ページの上部に、幅全体を占める div があります。その下に、固定幅の div を中央に配置したいと考えています。

このようなもの：

<div id="top">
        <p>This is the top wrapper</p>
</div>
<div id="middle">
         <p>This is the fix width wrapper</p>
</div>

スタイルは

#top {
    height:100px;
    background:red;
    width: 100%;
    }

#middle {
    width:900px;
    margin:auto;
    height: 300px;
    background:green;
    color:#fff;
    }

デモ: http://jsfiddle.net/JeroenGerth/zeZ4k/2/

ブラウザ ウィンドウが 900 ピクセルより大きい場合は、すべて問題ありません。ただし、ウィンドウが 900 ピクセルより小さい場合は問題があります。水平スクロールバーが表示されます。#middle div の幅は 900 ピクセルなので、これは論理的に思えます。しかし、右にスクロールすると、上部の div が画面の幅全体を占めていないことがわかります。右にスクロールする前に見えるスペースを埋めるだけです。ページの右上隅に白い余白が表示されます。

私は何を間違っているか見落としていますか？#middle div に固定幅を使用することはできませんか? :-( ウィンドウにスクロールバーが必要な場合、上部の div を幅全体に表示するにはどうすればよいですか?

ご協力ありがとうございました。

4

2 に答える 2

1

max-width: 900px;オン#middleまたはmin-width: 900pxオンに設定#top

http://jsfiddle.net/zeZ4k/3/

于 2013-10-02T19:22:36.783 に答える
0

最初の div はボディの 100% を占めるため、witch は 900px より小さくすることができます。

設定

#top {
height:100px;
background:red;
width: 100%; /*Not needed - this is the default behavior*/
min-width: 900px; /*set this*/
}
于 2013-10-02T19:22:42.723 に答える