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

时间:2014-07-14 16:13:13

标签: html css scroll

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

我该如何解决这个问题?

谢谢!

6 个答案:

答案 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>