0

以下のコードの親 DIV が常に画面を完全に (100%) 満たすとは限らない理由を解明しようとしています。特に、ブラウザーの幅を子 DIV の幅よりも小さくしてスクロールすると、右（親のDIVの背景が切り捨てられていることがわかります）。

なぜこれが起こるのですか?また、ウィンドウの幅全体を親 div で埋めるにはどうすればよいですか?

html は次のとおりです。

<!doctype html>
<html>
    <head>
        <link href="teststyle.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div id="parent">
            <div id="child">
                <p>red background gets truncated when the horizontal scrollbar is present.</p>
            </div>
        </div>
    </body>
</html>

これは私のcssです：

* {
    margin:0;
    padding:0;
    border:0;
    }

#parent{
    background:red;
    padding: 20px 0;
}

#child{
    width:600px;
    margin:0px auto;
    background:yellow;
}

Firefox のスクリーンショット

Windows、Firefox (最新)、Chrome (最新)、IE 9 を使用しています。

4

3 に答える 3

1

min-width: 600px を #parent に指定します ( minwidthof 親と子の幅は同じです)

デモ: http://jsfiddle.net/ZYLzs/2/

于 2012-08-14T10:23:02.780 に答える
0

親に100％の幅を与えてみましたか？

#parent{
   background:red;
   padding: 20px 0;
   width:100%;
}
于 2012-08-14T10:12:55.050 に答える
0 
#parent{
    background:red;
    padding: 20px 0;
    width: 100%; /* add this */
}
于 2012-08-14T10:14:21.710 に答える