html - 文件超过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 占用页面一侧空间的结果，并且为了保持 <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>