Question

我想弄清楚为什么下面代码中的父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 screenshot

我正在使用Windows，Firefox（最新），Chrome（最新），IE 9。

Answer 1

给最小宽度：600px到#parent（父宽度与子宽度相同）

演示：http://jsfiddle.net/ZYLzs/2/

Answer 2

你试过给父母100％的宽度吗？

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

Answer 3

#parent{
    background:red;
    padding: 20px 0;
    width: 100%; /* add this */
}

调整窗口大小时，父背景DIV会被截断

3 个答案: