我有以下简单的HTML和CSS:
<html>
<head>
<title></title>
</head>
<body>
<div style="width: 970px;">Text area</div>
<div style="height: 20px; background-color:gray; width: 100%; "></div>
</body>
</html>
我在浏览器中加载此页面。如果浏览器的宽度是400px(只是一个例子),那么我在浏览器屏幕底部看到一个水平滚动条。如果我向右移动滚动条,我可以看到第二个div的背景不会向右延伸。
我希望第二个div的背景颜色可以从浏览器的左边缘延伸到右边缘(无论浏览器的宽度是多少)。
我该如何解决这个问题?
谢谢!
答案 0 :(得分:2)
你可以这样解决:
<div style="width: 970px">
<div>Text area</div>
<div style="height: 20px; background-color:gray; width: 100%;"></div>
</div>
答案 1 :(得分:1)
我建议使用CSS重置确保浏览器默认CSS不会干扰。 http://meyerweb.com/eric/tools/css/reset/
答案 2 :(得分:1)
这是因为body
标记的宽度是浏览器窗口的宽度,第二个div上的100%宽度是父级的宽度,即body
标记。在您的示例中,这意味着第二个div将只是400px(浏览器窗口的宽度)。
您必须将body
标记的宽度设置为970px
才能使其生效。将body
设置为100%
宽度将无法解决问题,因为这将占用其父级宽度的100%,即html
标记,并且仍将是浏览器窗口的宽度。< / p>
<body style="width: 970px;">
<div style="width: 970px;">Text area</div>
<div style="height: 20px; background-color:gray; width: 100%; "></div>
</body>
编辑:另一种方法是将body
设置为display: inline-block
,这将迫使它扩展到其子女的宽度:
<body style="display:inline-block">
<div style="width: 970px;">Text area</div>
<div style="height: 20px; background-color:gray; width: 100%; "></div>
</body>
答案 3 :(得分:1)
每当元素的显式设置宽度大于body
的宽度时,元素就会溢出body
的边界。换句话说,浏览器不会调整body
的宽度,从而重构整个页面布局,因为一个元素溢出。
一种解决方案是在第一次div
溢出之后生成div
。
这是HTML:
<body>
<div>Text area</div>
<div></div>
</body>
CSS:
body > div:first-of-type {
width: 970px;
outline: 1px solid red;
}
body > div:last-of-type {
width: 100%;
height: 20px;
background-color: gray;
}
@media screen and (max-width: 970px) {
body > div:nth-of-type(2) {
width: 970px;
}
}
而且,这是一个小提琴:http://jsfiddle.net/8mK7f/。
答案 4 :(得分:0)
在CSS中使用百分比时,它只会扩展到父元素的%。在此示例中,确保body元素也是100%宽度。
祝你好运:)
答案 5 :(得分:-1)
由于您正在对宽度进行硬编码,为什么不将灰色条的宽度设置为与div&gt; Text Area&lt; ? e.g
<div style="width: 970px;">Text area</div>
<div style="height: 20px; background-color:gray; width: 970px; "></div>