css - 当我将边框放置到占据 100% 高度（高度：100vh）的 div 时，会显示垂直滚动，如何删除垂直滚动？

Question

我已经有这个问题很长一段时间了，我不知道如何解决它。如果我删除边框，滚动就会消失，这就是我想要的，但是如果我的 div 有边框，则会出现垂直滚动。我想保持我的 div 与它各自的边界。我该如何解决？

div{
 height:100vh;
 background:yellow;
 border:1px solid red;
}
body,html{
  padding:0px;
  margin:0px;
}

<div></div>

标签： css

Answer 1

可能有几种方法可以处理它。默认情况下，box-sizing设置为content-box。请参阅：https ://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

因此，如果您有一个100vh添加边框的 div，则会将顶部边框的宽度加上底部边框的宽度添加到总高度。这样你就得到了一个卷轴。

您可以将 设置div为box-sizing: border-box，如下所示：

div{
 height: 100vh;
 background:yellow;
 border:1px solid red;
 box-sizing: border-box;
}
body,html{
  padding:0px;
  margin:0px;
}

<div></div>

或者，您可以通过使用从总高度中减去额外高度的函数来考虑边框的任何间距或影响整体高度的其他间距calc，例如height: calc(100vh - 2px);，如下所示：

div{
 height: calc(100vh - 2px);
 background:yellow;
 border:1px solid red;
}
body,html{
  padding:0px;
  margin:0px;
}

<div></div>