我想弄清楚为什么下面代码中的父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。
答案 0 :(得分:1)
给最小宽度:600px到#parent(父宽度与子宽度相同)
答案 1 :(得分:0)
你试过给父母100%的宽度吗?
#parent{
background:red;
padding: 20px 0;
width:100%;
}
答案 2 :(得分:0)
#parent{
background:red;
padding: 20px 0;
width: 100%; /* add this */
}