当设置 body 样式（如 margin: 0; padding: 0;）后，页面仍无法撑满全屏，常见原因是 HTML 和 Body 的高度继承链断裂；正确做法是确保 html 高度为 100%，并让 body 使用 min-height: 100%，而非直接设 height: 100vh，以兼顾内容溢出与布局稳定性。
当设置 `body` 样式（如 `margin: 0; padding: 0;`）后，页面仍无法撑满全屏，常见原因是 html 和 body 的高度继承链断裂；正确做法是确保 `html` 高度为 `100%`，并让 `body` 使用 `min-height: 100%`，以兼顾内容溢出与布局稳定性。
在 Web 开发中，一个看似简单却高频出现的问题是：即使已重置 body 的 margin 和 padding，其背景色或背景图仍无法覆盖整个浏览器视口（Viewport），Inspect 元素时发现 body 高度远小于屏幕实际尺寸（例如仅 417px，而屏幕为 1080px）。这并非 CSS 写错，而是受 CSS 高度继承机制和初始包含块（initial containing block）规则影响。
✅ 正确的全屏覆盖方案
标准且健壮的写法是同时设置 html 和 body 的高度关系：
html {
height: 100%; /* 确保根元素高度为视口高度 */
}
body {
margin: 0;
padding: 0;
background-color: black;
color: white;
font-family: 'Montserrat', sans-serif;
min-height: 100%; /* 关键：最小高度 = html 高度，内容多时可自然撑高 */
}? 原理说明：height: 100% 在 CSS 中是相对于父容器计算的。body 的父元素是 html，而 html 默认高度由内容决定（非视口）。因此必须显式声明 html { height: 100%; }，才能让 body min-height: 100% 有效继承视口高度。
⚠️ 为什么不推荐直接用 body { height: 100vh; }？
- 100vh 指“视口高度的 100%”，看似合理，但存在两个典型风险：
- 移动端兼容性问题：Safari/iOS 浏览器中，vh 在地址栏展开/收起时可能触发重绘异常，导致布局跳动；
- 破坏相对定位流：如题中所述，height: 100vh 会将 body 强制截断为固定高度，使内部 position: relative 元素的 top/bottom 计算基准失真，尤其当内容超出一屏时，底部内容被裁剪且无法滚动。
✅ 进阶建议：适配现代布局需求
若项目使用 Flexbox 或 Grid 布局，可进一步提升健壮性：
html {
height: 100%;
}
body {
margin: 0;
min-height: 100%;
display: flex;
flex-direction: column;
font-family: 'Montserrat', sans-serif;
}此时，body 可作为弹性容器，子元素（如 header, main, footer）能自然参与高度分配，无需额外 hack。
? 其他排查要点
- ✅ 检查是否引入了第三方 UI 框架（如 Bootstrap、Tailwind CSS），它们可能全局重置了 html/body 高度或设置了 max-width/overflow；
- ✅ 确认浏览器缩放比例为 100%（快捷键 Ctrl+0 / Cmd+0），缩放异常会导致 vh 计算偏差；
- ✅ 避免在 body 上设置 overflow: hidden（除非明确需要），否则会隐藏滚动条并截断长内容。
✅ 总结
要让 body 稳定覆盖整个视口且兼容内容增长，核心原则是：
html { height: 100%; } + body { min-height: 100%; } —— 简洁、语义清晰、无副作用。
这一模式既满足视觉全覆盖需求，又保持文档流完整性，是现代 CSS 布局中的推荐实践。
