本文详解为何 body 元素默认不占据浏览器视口全部高度，以及如何通过 html 和 body 的协同设置（如 height: 100% + min-height: 100%）实现真正全屏覆盖，同时避免破坏相对定位元素的布局。
本文详解为何 `body` 元素默认不占据浏览器视口全部高度，以及如何通过 `html` 和 `body` 的协同设置（如 `height: 100%` + `min-height: 100%`）实现真正全屏覆盖，同时避免破坏相对定位元素的布局。
在 Web 开发中，一个常见却易被忽视的问题是：即使为
设置了 margin: 0; padding: 0; background-color: black;，其实际渲染高度仍远小于视口（例如仅 417px 高，而屏幕为 1080px），导致背景色无法铺满整个屏幕——这并非 CSS 写错，而是源于 HTML/CSS 的高度继承机制。根据 CSS 规范，height: 100% 在子元素上生效的前提是其父容器具有明确的高度值。而 根元素默认高度由内容决定，并非自动等于视口高度；因此直接给 body { height: 100vh; } 虽能强制拉伸，但可能挤压或错位 position: relative 等依赖文档流的元素（尤其当页面存在滚动或动态内容时）。
✅ 推荐且稳健的解决方案是：
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
min-height: 100%;
background-color: black;
color: white;
font-family: 'Montserrat', sans-serif;
}- html { height: 100% } 将根元素高度设为“其包含块”（即视口）的 100%，为后代提供可继承的高度基准；
- body { min-height: 100% } 确保 body 至少撑满整个视口，同时允许内容自然扩展（如长页面仍可正常滚动）；
- 保留 margin: 0; padding: 0; 消除浏览器默认边距干扰。
⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 勿滥用 height: 100vh 于 body：vh 单位基于视口，但会忽略地址栏、书签栏等 UI 占用空间，在移动端或缩放状态下易引发意外截断或滚动条；
- 检查外部样式干扰：UI 框架（如 Bootstrap、Tailwind）、重置 CSS（如 Normalize.css）或第三方库可能重置 html/body 高度，建议使用浏览器开发者工具的“Computed”面板验证最终计算值；
- 确认浏览器缩放为 100%（快捷键 Ctrl+0 / Cmd+0），缩放会改变 vh 和百分比计算逻辑；
- 若需背景图全屏覆盖，推荐对 body 使用 background-size: cover; background-attachment: fixed;，而非依赖高度拉伸。
总结：body 不占满全屏的本质是高度继承链断裂。通过 html { height: 100% } 建立基准，再以 body { min-height: 100% } 安全延展，既符合语义化布局原则，又兼顾响应性与兼容性，是现代 CSS 布局中值得信赖的实践模式。
