使用100%宽度分隔的滚动条

Question

这是我的小提琴：http://jsfiddle.net/34TM4/1/

如您所见，红色div的宽度为100%。蓝色div的宽度为800px。如果向右滚动，可以看到800pxdiv的其余部分，可以看到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

如果向右滚动，可以看到800pxdiv的其余部分，可以看到100%div停止。。。

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

若要解决此问题，可以将min-width设置为与div#test相同的container。

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

JS Fiddle：http://jsfiddle.net/34TM4/6/

Answer 4

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