小编squ*_*iid的帖子

我想做的是创建几个水平对齐的彩色框。

<div class="outer">
  <div class="bg bg1">
  </div>
  <div class="bg bg2">
  </div>
  <div class="bg bg3">
  </div>
  <div class="bg bg4">
  </div>
</div>

--> Codepen 上的完整代码

几个事实：

1. 外层的position：relative
2. 背景position：absolute
3. leftbg1 到 bg4 不同

如果我将“outer”的宽度设置为100vw，一切都会好起来的。

但如果它大于100vw，例如101vw，就会有一点额外的空间我可以向下滚动（奇怪的是，没有垂直滚动条）。

如果是 300vw，我可以看到从左到右三个框，就会出现垂直滚动条。

所以我的问题是：

为什么宽度会影响垂直滚动条？

如果无法避免这种情况，还有其他方法可以实现我的想法吗？（我想创建多个div不是一个好方法）