html - 使用 100% 宽度 div 的滚动条

Question

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

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

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

score 3 · Accepted Answer

这是因为 100% 被定义为元素的父元素宽度的 100%。在这种情况下，因为没有父元素，所以窗口（框架）是父元素。所以 100% 将是窗口的宽度，即使其他元素会比窗口的宽度更宽。

如果您将两个 div 包装在另一个 div 中，并为新容器 div 提供 800 像素的宽度，则 100% 的 div 将扩展到 800 像素。

score 1 · Accepted Answer

百分比宽度参考元素的包含块。初始包含块是视口。您希望 100% 元素的包含块不是视口。为此，请将 100% 元素嵌套在非百分比宽度元素中。例如，用这个修改你的小提琴：

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


#blam
{
    width: 900px;
}

score 1 · Accepted Answer

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

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

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

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

score 0 · Accepted Answer

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

4 回答 4