min-height: 100vh 失效主因是 html 和 body 缺失高度约束，需设 min-height: 100% 并配合 Flex 布局（body display: flex; flex-direction: column）及 main 的 flex: 1 与 min-height: 0 才可靠实现满屏。
min-height: 100vh 为什么内容短时没撑满屏幕
因为 100vh 是视口高度，但父容器（比如 html、body）默认没有高度约束，导致子元素的 min-height: 100vh 失效。浏览器不会自动把 body 当作“有高度的容器”来继承。
常见错误现象：min-height: 100vh 写了，但页面内容很短时，底部留白、背景色没铺满、页脚上浮。
-
html和body都要设height: 100%或min-height: 100%（推荐后者，更安全） - 确保内容容器是
body的直接子元素，或至少没有中间层被设了height: auto或未设高度 - 如果用了 Flex 布局，
body设display: flex; flex-direction: column更可靠，此时min-height: 100vh在子容器上才真正生效
Flex + min-height: 100vh 实现“内容区最小满屏+页脚粘底”
这是目前最稳的方案：用 Flex 把 body 变成列式容器，让内容区“尽可能伸展”，同时保证最小高度不塌缩。
使用场景：后台管理页、登录页、单页应用主内容区等需要视觉上“占满视口”的布局。
立即学习“前端免费学习笔记（深入）”；
html, body {
min-height: 100%;
margin: 0;
}
body {
display: flex;
flex-direction: column;
}
main {
flex: 1;
min-height: 0; /* 关键！防止 flex 项内部溢出时高度失控 */
}注意 min-height: 0 —— 没它的话，当 main 里有长内容或绝对定位元素时，flex 可能误判高度，导致滚动异常或撑破视口。
100vh 在 iOS Safari 和横屏切换时的兼容性坑
100vh 在 iOS Safari（尤其是旧版）中会把地址栏/工具栏高度算进视口，导致实际可用高度变小；横屏切回竖屏后，vh 值可能未及时更新，造成留白或溢出。
性能 / 兼容性影响：纯 CSS 方案无法动态响应地址栏收放，JS 补偿成本高且有延迟。
- 简单项目可接受轻微误差，就用
min-height: 100vh+ Flex 方案，iOS 上多数情况已足够稳定 - 对体验要求极高的场景（如全屏图表页），改用 JS 动态计算：
document.documentElement.clientHeight，并监听resize，但要注意防抖和 orientationchange 兼容 - 避免在
@media (orientation: landscape)里硬写min-height: 100vh，横屏下vh反而是“窄边”，容易出错
content-box 与 border-box 对 min-height: 100vh 的影响
盒子模型会影响最终渲染高度是否“看起来满屏”。比如给 main 加了 padding 或 border 后，min-height: 100vh 是指内容区高度，加上内边距后整体就超出了视口。
参数差异：默认 box-sizing: content-box，100vh 不含 padding/border；设成 border-box 后，100vh 才真正代表“总高度”。
- 统一在全局加
* { box-sizing: border-box; }，省去后续所有尺寸推算麻烦 - 如果只给某容器设
min-height: 100vh，又必须保留padding，记得额外减去对应值（不推荐，易错） - 用
calc(100vh - 60px)补偿固定 header 高度时，务必确认 header 是否也用了border-box，否则减的值可能不准
实际项目里最容易被忽略的是 min-height: 0 在 flex 子项上的作用，以及 html 和 body 缺失 min-height: 100% 导致整条链路失效——这两个点一漏，其他都白配。
