Question

如您所见，红色div的宽度为100％。蓝色div的宽度为800px。如果您向右滚动，要查看800px div的其余部分，您可以看到100％div停止...

设置为宽度的100％，但并不总是不跟随滚动。这是为什么？有什么办法使这项工作？即使我们滚动，使用100％的宽度总是会占据屏幕的100％？

Answer 1

那是因为100％被定义为元素父元素宽度的100％。在这种情况下，因为没有父元素，所以窗口（框架）是父元素。因此，即使其他元素的宽度大于窗口的宽度，100％也将是窗口的宽度。

如果你将两个div包装在另一个div中并且给了新容器div宽度为800px，则100％的div将扩展到800像素。

Answer 2

百分比宽度引用元素的包含块。初始包含块是视口。您希望100％元素的包含块不是视口。要实现此目的，请将100％元素嵌套在非百分比宽度元素中。例如，修改你的小提琴：

<div id="blam">
<div id="container"></div>
<div id="test"></div>
</div>


#blam
{
    width: 900px;
}

Answer 3

如果您向右滚动，要查看800px div的其余部分，您可以看到100％div停止...

将宽度设置为百分比意味着它将适应其父元素的百分比。在div#container的情况下，它将适应视口的宽度，这是导致#container向右滚动时停止的原因。

要解决此问题，您可以将min-width设置为container，等同于div#test。

#container {
    width: 100%;
    height: 30px;
    background: #d45;
    min-width: 800px
}

Answer 4

解决问题的最快方法是添加min-width: 800px属性，如下所示：http://jsfiddle.net/34TM4/2/