为什么设置为100vh的元素实际尺寸大于视口屏幕？

排查步骤 #

• 第一步用浏览器开发者工具验证：按F12打开元素审查面板，选中#container查看盒模型计算项，能看到容器总高度=内容高度（100vh）+ 上下边框（共4px），总高度超过100vh。
• 第二步核对盒模型配置：CSS默认box-sizing属性值为content-box，此时你给元素设置的height仅包含内容区域高度，边框、内边距都会在设置的高度之外额外叠加，这是你当前问题的核心原因。
• 第三步排查其他可能的溢出因素：检查#container是否设置了padding、上下margin，或者body内是否有多余的空白文本节点、行高默认值撑高容器，你给出的示例中不存在这类问题。

修复方案 #

方案1：全局统一盒模型（更推荐） #

给所有元素统一设置box-sizing: border-box，此时宽高设置会自动包含边框和内边距，不会额外溢出：

/* 加入这段全局样式 */
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  height: 100vh;
  background-color: grey;
}

#container {
  height: 100%;
  border: 2px solid red;
}

方案2：手动减去边框占高 #

用calc计算容器高度，减去上下边框的总高度4px：

body {
  margin: 0;
  height: 100vh;
  background-color: grey;
}

#container {
  height: calc(100% - 4px);
  border: 2px solid red;
}

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