宽度大于100vw时出现垂直滚动条

Question

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

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

--> complete code on Codepen

---

一些事实：

1. 外部position：relative
2. bg的position：absolute
bg1至bg4的
3. left不同

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

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

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

---

所以我的问题是：

宽度如何影响垂直滚动条？

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

Answer 1

如评论中所述，垂直滚动条归因于vw和vh包括滚动条。如果您在body, html上使用100％，则会获得相同的效果而不会出现滚动条。

* {
  padding: 0;
  margin: 0;
}

body,
html {
  height: 100%;
}

.outer {
  position: relative;
  top: 0;
  left: 0;
  padding: 0;
  margin: 0;
  height: 100%;
  width: 300vw;
  /*try modifying the width with larger value*/
  overflow: hidden;
  background-color: lightyellow;
}

.bg {
  margin: 10vh 10vw;
  height: 80%;
  width: 80vw;
  top: 0;
  position: absolute;
}

.bg1 {
  background-color: #80c9be;
  left: 0;
}

.bg2 {
  background-color: #e99790;
  left: 100vw;
}

.bg3 {
  background-color: #f2e2cd;
  left: 200vw;
}

.bg4 {
  background-color: #48697f;
  left: 300vw;
}

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

Answer 2

视口单位是相对于视口的，因此，如果出现水平滚动条，则表示该滚动条将占用空间，因此我们需要垂直滚动才能看到水平方向隐藏的部分。

为避免这种情况，请仅使用vw单位，并使用％代替vh，这样高度将相对于父级而不是视口。我还删除了边距并调整了top和left的值以使块居中

* {
  padding: 0;
  margin: 0;
}

body,
html {
  height: 100%;
}

.outer {
  position: relative;
  top: 0;
  left: 0;
  height: 100%;
  width: 105vw; /* This won't create a vertical scroll*/
  overflow: hidden;
  background-color: lightyellow;
}

.bg {
  height: 80%;
  width: 80vw;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
}

.bg1 {
  background-color: #80c9be;
  left: 10vw;
}

.bg2 {
  background-color: #e99790;
  left: 110vw;
}

.bg3 {
  background-color: #f2e2cd;
  left: 210vw;
}

.bg4 {
  background-color: #48697f;
  left: 310vw;
}

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

如果您需要更好的方法，可以使用以下flexbox：

* {
  padding: 0;
  margin: 0;
}

body,
html {
  height: 100%;
}

.outer {
  position: relative;
  height: 100%;
  display:flex;
  background-color: lightyellow;
}

.bg {
  height: 80%;
  width: 80vw;
  margin:auto 10vw;
  flex-shrink:0;
}

.bg1 {
  background-color: #80c9be;
}

.bg2 {
  background-color: #e99790;
}

.bg3 {
  background-color: #f2e2cd;
}

.bg4 {
  background-color: #48697f;
}

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