网站底部出现额外空白：100vh高度区块为何超出视口？

问题出在CSS的盒子模型上：默认情况下box-sizing的值是content-box，这意味着你给元素设置的width和height只包含内容区域，padding和border会额外增加元素的总尺寸。

你给#second设置了height:100vh，同时又加了padding-top:200px，所以这个区块的实际总高度是100vh + 200px，直接超出了视口高度，自然出现滚动条。

方案一：使用border-box调整盒子模型 #

给#second添加box-sizing: border-box，这样padding和border会被包含在你设置的width和height范围内，总高度就能保持100vh：

#second {
  box-sizing: border-box; /* 新增这一行 */
  color: #fff;
  padding-right: 10vw;
  padding-top: 200px;
  background-color: black;
  width: 100%;
  height: 100vh;
}

.elem {
  width: 100%;
  padding: 3.5vw 3vw;
  border-top: 1px solid #888;
}

.elem h1 {
  text-transform: uppercase;
  font-size: 7.6vw;
  opacity: 0.7;
}

.elemlast {
  border-bottom: 1px solid #888;
}

方案二：将padding转移到内部元素 #

如果不想修改盒子模型，可以把padding-top:200px从#second移到第一个.elem上，避免撑开父元素高度：

#second {
  color: #fff;
  padding-right: 10vw;
  background-color: black;
  width: 100%;
  height: 100vh;
}

.elem:first-child {
  padding-top: calc(3.5vw + 200px); /* 保留原padding-top的同时加上200px */
}

.elem {
  width: 100%;
  padding: 3.5vw 3vw;
  border-top: 1px solid #888;
}

.elem h1 {
  text-transform: uppercase;
  font-size: 7.6vw;
  opacity: 0.7;
}

.elemlast {
  border-bottom: 1px solid #888;
}

内容的提问来源于stack exchange，提问作者saribcantcode