html - width大于100vw出现垂直滚动条

Question

<分区>

Answer 1

视口(viewport)单位是相对于视口(viewport)的，所以如果出现水平滚动条，则意味着该滚动条将占用空间，因此我们需要垂直滚动才能看到水平滚动条隐藏的部分。

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

* {
  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>