Question

我有以下简单的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的背景颜色可以从浏览器的左边缘延伸到右边缘（无论浏览器的宽度是多少）。

我该如何解决这个问题？

谢谢！

Answer 1

你可以这样解决：

<div style="width: 970px">
  <div>Text area</div>
  <div style="height: 20px; background-color:gray; width: 100%;"></div>
</div>

Answer 2

我建议使用CSS重置确保浏览器默认CSS不会干扰。 http://meyerweb.com/eric/tools/css/reset/

Answer 3

这是因为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>

Answer 4

每当元素的显式设置宽度大于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/。

Answer 5

在CSS中使用百分比时，它只会扩展到父元素的％。在此示例中，确保body元素也是100％宽度。

祝你好运：）

Answer 6

由于您正在对宽度进行硬编码，为什么不将灰色条的宽度设置为与div＆gt; Text Area＆lt; ？ e.g

<div style="width: 970px;">Text area</div>
<div style="height: 20px; background-color:gray; width: 970px; "></div>

滚动到右侧时，背景颜色不会显示

6 个答案: