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>的宽度，你得到一个 HORIZONTAL SCROLLBAR 。

如果您使用的是100％，则不会遇到此问题：

＆＃13;

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;
}

＆＃13;

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

＆＃13;

文件超过100vh时出现水平溢出

1 个答案: