height: 100vh在内容少时塌陷是因为它强制固定高度，不随内容伸缩，且受ios safari地址栏显隐、滚动条占用等影响导致视口高度跳变；应改用min-height: 100dvh并重置html/body内外边距。
用 min-height: 100dvh 替代 height: 100vh，再配合 html, body { margin: 0; padding: 0; }，基本能解决 95% 的“内容少却撑不满屏”问题。
为什么 height: 100vh 在内容少时会塌陷？
因为 height 是强制高度：如果父容器（比如 body）没设高，子元素的 height: 100vh 仍会生效，但一旦页面内容高度不足，它不会“拉伸”父容器来填满视口——反而可能因滚动条、地址栏显隐、iOS Safari 动态视口导致实际渲染高度跳变或留白。
-
height: 100vh在 iOS Safari 滚动时地址栏收起，vh值会突然变大，页面“抖一下” - 若内容本身高度 min-height，容器就只包裹内容，不撑开
-
body默认有margin: 8px，不重置会导致左右/上下多出白边
min-height: 100dvh 比 100vh 强在哪？
dvh（dynamic viewport height）是浏览器实时响应地址栏、工具栏显隐后的真实可用高度单位，Chrome 105+、Safari 16.4+、Firefox 112+ 已支持。它不是“理论视口”，而是“此刻你能真正画图的高度”。
- 比
100vh更稳：横竖屏切换、软键盘弹出、地址栏收起时，100dvh自动更新 - 比 JS 监听
window.innerHeight更轻量：无需防抖、无需绑定resize或scroll - 必须搭配
min-height：它只保证“至少这么高”，内容多了自然溢出，不会截断 - 兜底写法要带
min-height: 100vh：老浏览器不认识dvh，会忽略该行，继续用vh
推荐样式：
.fullscreen {
width: 100vw;
min-height: 100vh;
min-height: 100dvh;
margin: 0;
box-sizing: border-box;
}
什么时候必须上 JS 补充？
当你的场景对“像素级贴合物理屏幕”有硬要求：比如 WebGL 渲染画布、全屏视频封面、Canvas 游戏主容器、需要和 native app 高度对齐的嵌入式 H5。
- 仅监听
resize不够：iOS Safari 地址栏收起时不一定触发resize，但innerHeight已变 - 更稳妥的做法是监听
scroll+resize+orientationchange，然后节流调用：element.style.height = window.innerHeight + 'px' - 注意：不要在
DOMContentLoaded里直接设高——此时innerHeight可能还没反映地址栏状态 - 如果用了
transform或scale模拟全屏，fullscreenchange事件根本不会触发，别指望它
position: fixed 和 absolute 能不能替代？
能，但适用场景不同。它们绕过文档流，天然无视父容器高度限制，适合“覆盖层”类需求（如模态框背景、加载遮罩、固定视频背景），但不适合主内容流布局。
-
position: fixed：始终相对于视口定位，滚动不移位；需加z-index避免被盖住；在 iOS 唤起软键盘时可能错位，得监听resize重算 -
position: absolute：依赖最近的position: relative祖先；若祖先没设高，height: 100%会失效；不如dvh直观可控 - 两者都吃不到
:fullscreen伪类样式，无法响应原生全屏 API 的状态变化
真正难的不是写法，是意识到：所谓“撑满”，从来不是 CSS 单点问题，而是视口行为、设备状态、浏览器实现差异共同作用的结果。多数时候，min-height: 100dvh 就是那个最省心的解，但得知道它在哪失效、为什么失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
