文件超过100vh出现Horizo​​ntal Overflow

Question

我很困惑为什么当我超过100vh时，会出现一个水平滚动条。我知道你可以使用 overflow-x: hidden;但是有没有不用它就能解决的方法呢？

这是一个示例代码：

body {
  margin: 0;
  padding: 0;
}
.job-box {
  width: 100vw;
  height: 150px;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  height: 25vh;
  border-bottom: solid 1pt #000000;
}
.job-box img {
  height: 10vh;
}
.title-box {
  background-color: #000000;
  color: #ffffff;
  font-family: calibri;
}

<div class="job-box">
  assaas
</div>
<div class="job-box">
  assaas
</div>
<div class="job-box">
  assaas
</div>
<div class="job-box">
  assaas
</div>

当您删除最后一个 div 时，水平滚动条消失。

Answer 1

您描述的效果是 VERTICAL SCROLLBAR 在页面一侧占据 space 的结果，并且为了保持<div>s，你得到一个 HORIZONTAL SCROLLBAR。

如果您使用 100% 的 with 代替，您将不会遇到此问题：

body {
  margin: 0;
  padding: 0;
}
.job-box {
  width: 100%;
  height: 150px;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  height: 25vh;
  border-bottom: solid 1pt #000000;
}
.job-box img {
  height: 10vh;
}
.title-box {
  background-color: #000000;
  color: #ffffff;
  font-family: calibri;
}

<div class="job-box">
  assaas
</div>
<div class="job-box">
  assaas
</div>
<div class="job-box">
  assaas
</div>
<div class="job-box">
  assaas
</div>