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;
}

火狐截图

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

4

3 回答 3

1

给 min-width: 600px 给 #parent （ minwidthof parent 与 child width 相同）

演示：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 回答