本文详解为何 body 默认不占满整个视口高度，以及如何通过 html 与 body 的协同设置（如 height: 100% + min-height: 100%）实现真正全屏覆盖，同时避免破坏相对定位元素布局。
本文详解为何 `body` 默认不占满整个视口高度，以及如何通过 `html` 与 `body` 的协同设置（如 `height: 100%` + `min-height: 100%`）实现真正全屏覆盖，同时避免破坏相对定位元素布局。
在 Web 开发中，一个常见却易被忽视的问题是：即使为
设置了 margin: 0; padding: 0; background-color: black;，它在浏览器中仍可能仅占据内容所需高度（例如你观察到的 1536×417px），而非预期的全屏（如 1920×1080px）。这并非 CSS 错误，而是由 HTML 渲染规范决定的—— 默认是一个常规流内块级元素，其高度由子内容撑开，而非自动继承视口高度。根本原因在于：height: 100% 在 CSS 中是相对于父容器高度计算的。而
的父元素是 ，若 自身未显式设定高度，body { height: 100% } 将失效（计算结果为 0）。因此，正确做法是同时约束根元素与主体元素的高度行为：/* 关键：确保根元素获得视口高度基准 */
html {
height: 100%;
}
/* body 不强制固定高度，而是保证最小覆盖整个视口 */
body {
margin: 0;
padding: 0;
background-color: black;
color: white;
font-family: 'Montserrat', sans-serif;
min-height: 100%; /* ✅ 推荐：兼容内容溢出场景 */
}⚠️ 注意：避免直接使用 body { height: 100vh; } ——虽然看似直观，但它会将 body 严格限制为视口高度，导致以下问题：
- 当页面内容超过一屏时，底部内容被截断且无法滚动；
- 相对定位（position: relative）子元素的 top/bottom 基准可能异常；
- 在移动端 Safari 等浏览器中，100vh 可能因地址栏显示/隐藏而动态变化，引发布局抖动。
此外，请排查以下潜在干扰因素：
立即学习“前端免费学习笔记（深入）”；
- 外部样式冲突：检查是否引入了 Bootstrap、Tailwind 或重置 CSS（如 normalize.css），它们可能重设了 html/body 的默认尺寸或盒模型；
- 浏览器缩放：确认浏览器缩放比例为 100%（Windows/Linux 按 Ctrl+0，macOS 按 Cmd+0），否则 vh 单位和渲染尺寸均会失真；
- DOCTYPE 声明缺失：确保 HTML 文件顶部包含标准声明 ，否则浏览器可能进入怪异模式（Quirks Mode），导致高度计算异常。
✅ 最佳实践总结：
- 优先采用 html { height: 100% }; body { min-height: 100% } 组合；
- 若需背景色/图铺满全屏，可将背景直接设在 html 上（更稳妥），或确保 body 的 min-height 生效；
- 使用开发者工具（F12）检查 html 和 body 的实际计算高度（Computed Tab），验证是否已继承 100%；
- 对于复杂布局（如含 sticky header / footer），建议配合 Flexbox 或 Grid 进行整体结构控制，而非仅依赖 body 高度。
遵循上述方案，即可稳定实现 body 内容区域自然延伸至视口底部，同时保持良好的可扩展性与兼容性。
