设置height为100vh时出现垂直滚动条，该如何修复？

核心原因 #

页面出现垂直滚动条通常是以下几个默认规则导致的：

• 浏览器默认给html、body标签设置了默认外边距（大多为8px），叠加容器高度后总高度超出视口
• 盒模型默认是content-box，设置的高度不包含内边距、边框，额外的边距会撑高容器
• 百分比高度需要父级元素提前设置高度属性才能继承生效

实现代码 #

先添加全局样式重置：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body {
  height: 100%;
}

给目标容器添加高度样式即可：

/* 你要占满窗口的容器样式 */
.full-height-container {
  height: 100%;
}

如果偏好使用视口单位，也可以直接给容器设置height: 100vh，只要提前做好上边的全局重置，不会出现滚动条。

异常排查 #

如果设置后仍有滚动条，可逐一核对以下项：

• 目标容器是否设置了额外的上下外边距，外边距折叠会导致高度溢出
• 页面内是否有其他块级元素自带默认边距未被重置
• 检查是否有元素设置了超出视口的固定/绝对定位

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