Html 向右滚动时不显示背景色_Html_Css_Scroll

Html 向右滚动时不显示背景色

html css scroll

Html 向右滚动时不显示背景色,html,css,scroll,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> &l

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

我怎样才能解决这个问题

谢谢

在CSS中使用百分比时，它只扩展到父元素的百分比。在本例中，请确保body元素的宽度也为100%

祝你好运：）

你可以这样解决：

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


文本区

既然您正在对宽度进行硬编码，为什么不将灰色条的宽度设置为与div>文本区域相同？ e、 g

文本区

我建议使用CSS重置确保浏览器默认CSS不会干扰

这是因为

body

标记的宽度是浏览器窗口的宽度，第二个div上的100%宽度是父级的宽度，即

body

标记的宽度。在您的示例中，这意味着第二个div将仅为400px（浏览器窗口的宽度）

您必须将

body

标记的宽度也设置为

970px

，这样才能工作。将

body

设置为

100%

width无法解决此问题，因为这将占用其父级宽度的100%，父级宽度是

html

标记，并且仍然是浏览器窗口的宽度

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

每当元素的显式设置宽度大于

主体的宽度时，元素就会溢出主体的边界。换句话说，浏览器不会调整正文的宽度，从而重新构造整个页面布局，因为一个元素溢出
一种解决方案是使第一个div
之后的div也溢出
以下是HTML：
<body>
    <div>Text area</div>
    <div></div>
</body>

还有一把小提琴：。
这太奇怪了。试图找到一些修复方法。我在body标记中添加了style=“width:100%”。它不起作用。我错过了什么？谢谢第二个div的宽度停止在970px宽度。我想让它从一边延伸到另一边，不管浏览的大小如何。我在帖子里说了。谢谢@好奇1第二种解决方案应该对你有用。将主体设置为display:inline block将强制其为其子项的宽度，这意味着第二个div将获得该宽度。这是一把小提琴：戴夫，它不起作用。正如在文章中所说，即使浏览器的宽度超过970px，我也需要第二个div从浏览器的左边缘延伸到右边缘。如果将Fiddle中右下角页面的宽度增加到970px以上，则Fiddle不会显示正确的结果。非常感谢你的帮助！！！不起作用。我希望第二个div从一侧延伸到另一侧，而不管浏览宽度是多少。我在帖子里说。谢谢DRD，解决方案不起作用。正如在文章中所说，即使浏览器的宽度超过970px，我也需要第二个div从浏览器的左边缘延伸到右边缘。如果将Fiddle中右下角页面的宽度增加到970px以上，则Fiddle不会显示正确的结果。非常感谢您的帮助！！！——是的，它确实有效。您的屏幕可能会有点小，以纳入小提琴预览屏幕超过970px。这里有一个不同的提琴，大小为340px的textarea div和相应调整的媒体查询代码：。这不起作用。正如在文章中所说，即使浏览器的宽度超过970px，我也需要第二个div从浏览器的左边缘延伸到右边缘。非常感谢您的帮助！！！——@好奇1那么你应该使用相对大小。
<body style="display:inline-block">
    <div style="width: 970px;">Text area</div>
    <div style="height: 20px; background-color:gray; width: 100%; "></div>
</body>

<body>
    <div>Text area</div>
    <div></div>
</body>

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;    
    }
}