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

时间:2012-08-14 10:08:18

标签: html css

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

3 个答案:

答案 0 :(得分:1)

给最小宽度:600px到#parent(父宽度与子宽度相同)

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

答案 1 :(得分:0)

你试过给父母100%的宽度吗?

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

答案 2 :(得分:0)

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