html { height: 100% } 单独无效，因百分比高度需父级有明确高度基准，而初始包含块无默认高度；须组合 viewport 设置、根元素重置、优先使用 100dvh 并辅以 js 动态同步。
直接设 height: 100% 在 或 上，不加其他约束，基本没用——浏览器默认不会让根元素“继承视口高度”，而是按内容撑高。真要撑满，得组合重置、单位选择和必要时的 JS 补偿。
为什么 `html { height: 100% }` 单独写不生效
常见现象：写了 `html, body { height: 100%; }`，但子元素用 `height: 100%` 依然塌陷，或全屏容器留白/滚动条意外出现。
- 父级未显式设高时，百分比高度无计算基准——`height: 100%` 是相对于父容器高度的，而 `` 的父是“初始包含块”（即视口），但规范要求它必须有明确的高度来源
- 浏览器默认给 `` 加 `8px margin`，会触发滚动条，导致 `100%` 实际被压缩
- 移动端 Safari 中，`100%` 若依赖 `body` 高度，而 `body` 又没设 `min-height: 100vh`，地址栏收起时高度突变，布局跳动
必须做的三件事：viewport + 重置 + dvh 优先
漏掉任意一项，都可能在 iOS 或 Android 上出问题，尤其首屏加载或横竖屏切换时。
- 加 `` —— 没这行，`100vh` 和 `100%` 在移动端直接不可信
- 重置根元素：
html, body { margin: 0; padding: 0; height: 100%; }，同时推荐加* { box-sizing: border-box; }避免边框/内边距吃掉高度 - CSS 中优先用
height: 100dvh;，再降级：height: 100vh;（后声明的被旧浏览器解析）——100dvh能响应 iOS 地址栏收起，100vh不能
Grid 或 Flex 全屏容器里 `height: 100%` 怎么写才对
很多人把 Grid 容器嵌在 `
` 里，又只给容器设display: grid，结果 `grid-row: 1 / -1` 完全无效。根本原因是容器本身没高度。- 如果 Grid 容器是 `` 直接子元素，确保 `` 有
height: 100%且 `` 同步设高 - 如果容器是 `.wrapper` 这类中间层，别用
height: 100vh（内容超长会被截），改用min-height: 100vh - Flex 全屏同理：`` 设
display: flex后，子元素需flex: 1+min-width: 100vw+min-height: 100vh，单靠height: 100%不够
什么时候必须用 JS 动态同步 `window.innerHeight`
不是所有场景都要 JS，但以下几类绕不开：
-
<canvas></canvas>、WebGL 渲染画布——像素级匹配屏幕高度，CSS 单位有舍入误差，必须用canvas.height = window.innerHeight - iOS Safari 刚加载时，
100dvh可能延迟生效，`DOMContentLoaded` 里取window.innerHeight更准 - 监听
resize、scroll、orientationchange三个事件（iOS 地址栏变化不一定触发resize） - 节流执行，避免高频重绘：
element.style.height = window.innerHeight + 'px';
height: 100% 看似简单，实际是 CSS 布局里最易被浏览器默认行为和移动端视口模型反杀的一环。真正稳定的做法，从来不是单点设置，而是 viewport、重置、现代单位、JS 补偿四者缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
