当设置 body { margin: 0; padding: 0; } 后，body 仍无法填满整个屏幕，通常是因为默认文档流中 html 和 body 的高度未被显式继承；正确做法是将 html 设为 height: 100%，再令 body 使用 min-height: 100%，兼顾内容扩展与全屏覆盖。
当设置 body { margin: 0; padding: 0; } 后，body 仍无法填满整个屏幕，通常是因为默认文档流中 html 和 body 的高度未被显式继承；正确做法是将 html 设为 height: 100%，再令 body 使用 min-height: 100%，兼顾内容扩展与全屏覆盖。
在 Web 开发中，一个常见却易被忽视的问题是：即使清除了 body 的 margin 和 padding，它依然无法撑满整个浏览器视口（viewport）。例如，开发者观察到 DevTools 中 body 的计算高度仅为 417px，而屏幕实际分辨率为 1920×1080 —— 这说明 body 并未真正“占满”可视区域。
根本原因在于：HTML 元素默认不继承视口高度，而 body 的百分比高度（如 height: 100%）是相对于其父容器（即 ）计算的；若 自身高度未明确设定，100% 就会退化为内容所需高度，而非视口高度。
✅ 推荐解决方案（稳定、语义清晰、兼容性强）：
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
background-color: black;
color: white;
font-family: 'Montserrat', sans-serif;
min-height: 100%; /* 关键：确保至少占满视口，内容超长时仍可滚动 */
}⚠️ 为什么不直接用 body { height: 100vh; }？
立即学习“前端免费学习笔记（深入）”；
- 100vh 表示视口高度的 100%，看似直观，但存在两个典型风险：
- 破坏相对定位布局：若页面内有 position: relative 或 absolute 元素依赖 body 的自然高度流，强制 height: 100vh 可能截断内容或错位定位上下文；
- 移动端兼容隐患：部分 iOS Safari 版本中，vh 在地址栏显示/隐藏时会动态变化，导致布局抖动。
? 额外排查建议：
- ✅ 检查是否引入了第三方 CSS 框架（如 Bootstrap、Tailwind 默认样式），它们可能重置了 html 或 body 的高度行为；
- ✅ 确保浏览器缩放为 100%（快捷键 Ctrl+0 / Cmd+0），缩放异常会导致 DevTools 尺寸显示失真；
- ✅ 验证是否遗漏 标签（虽现代浏览器自动补全，但严格模式下缺失会影响高度继承）。
? 进阶提示：若需实现「视口级全屏背景 + 内容自适应滚动」，推荐组合使用：
html { height: 100%; }
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
/* 子容器可灵活分配空间，例如：*/
main { flex: 1; } /* 占据剩余全部高度 */
footer { height: 60px; }总结：让 body 完全覆盖视口，本质是建立一条可靠的高度继承链 —— 从 html → body → 内容。采用 html { height: 100% } + body { min-height: 100% } 是最稳健、符合 CSS 规范且向后兼容的实践方案。
