最可靠方式是用 height: 100vh，它直接基于视口高度，不依赖父元素设高；而 height: 100% 常因父级无明确高度失效，且在移动端和嵌套场景中存在滚动、缩放等兼容性问题。
用 height: 100vh 让元素撑满整个屏幕高度
直接写 height: 100vh 是最常用也最可靠的方式——它表示“视口高度的100%”，不依赖父容器是否设了高度，也不需要 html 或 body 显式设高。
常见错误是写成 height: 100%，结果没生效：因为百分比高度要求父元素有明确高度，而默认情况下 html 和 body 的高度是“包裹内容”的，不是全屏。
-
100vh在移动端 Safari 中可能包含地址栏高度（滚动时变化），导致视觉上“超屏”或“留白” - 如果页面有固定头部/底部，用
calc(100vh - 80px)更稳妥，但注意减的值必须是确定的像素值，不能是em或rem - 不要和
min-height: 100vh混用在同一个元素上——后者只在内容少时撑满，内容多时会随内容增长，前者强制固定为一屏高
为什么 height: 100% 经常失效
根本原因在于 CSS 百分比高度的计算规则：它只对“有明确高度的父容器”生效。而浏览器默认的 html 和 body 没有设定高度，它们的高度由子内容决定。
有人会尝试给 html, body { height: 100%; }，这确实能让 height: 100% 向下传递，但问题没根除：
- 一旦中间某层父元素没设高（比如一个没加
height: 100%的div），链就断了 - Flex 或 Grid 容器内部子项用
height: 100%依然可能无效，因为 flex item 默认不继承父高度 - 移动端键盘弹出时，
vh会动态缩放，但%不会响应，反而更难控制
移动端 Safari 中 vh 值跳变的问题
Safari 在 iOS 15+ 上把 vh 定义为“当前可视区域高度”，而不是“初始视口高度”。页面滚动、地址栏收起/展开时，100vh 实际像素值会变，导致元素突然拉伸或收缩。
临时解法是用 JS 监听 resize 并重设 --vh 自定义属性：
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
window.addEventListener('resize', () => {
vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
});
然后在 CSS 中用 height: calc(var(--vh, 1vh) * 100) 替代 100vh。不过要注意：这个方案在页面刚加载、JS 还没执行前会有闪动。
全屏布局中滚动行为容易被忽略的细节
如果整个页面只有一个 div 设了 height: 100vh，且内容超出，用户会发现无法滚动——因为元素高度被锁死，溢出被裁剪（除非加 overflow-y: auto）。
更常见的需求其实是“视口内可见区域填满，内容可滚动”，这时应该：
- 让容器设
min-height: 100vh，而非height: 100vh - 确保父级（如
body）没有overflow: hidden - 避免对
html或body设置height: 100vh，否则整页失去滚动能力
真正麻烦的是嵌套滚动场景，比如一个 100vh 的 modal 内部还要滚动，这时候得手动控制 overscroll-behavior: contain，不然会触发背景页一起滚。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
