当宽度大于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>

-->Codepen上的完整代码

---

几个事实：

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

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

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

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

---

所以我的问题是：

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

如果无法避免，还有其他方法来实现我的想法吗？(我想创建几个div不是一个好方法(

Answer 1

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

为了避免这种情况，请仅使用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>

Answer 2

正如评论中所说，垂直滚动条是由于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>