height: 100vh 不生效主因是父容器未显式设高，需确保 html 和 body 为 height: 100% 或 100vh；safari 存在滚动时视口变化但 vh 不更新问题，推荐用 min-height: 100vh + height: 100% 或 100dvh（兼容新浏览器）。
height: 100vh 不生效的常见原因
直接写 height: 100vh 却没填满视窗，大概率不是 CSS 写错了，而是父容器没“撑开”。vh 是相对于视口的高度单位，但若元素的父级（比如 body 或 html）本身高度为 auto，某些浏览器（尤其是 Safari 和旧版 Chrome）会拒绝让子元素用 100vh 撑开——它只认“可计算的高度上下文”。
常见错误现象：div 设了 height: 100vh，但实际高度只有几像素，或完全塌陷。
- 确保
html和body都显式设为height: 100%或height: 100vh - 检查是否被
margin、padding或box-sizing干扰（比如box-sizing: border-box下，padding会吃掉可用高度） - 避免父容器有
display: inline、float或position: absolute等破坏块级格式化上下文的设置
移动端 Safari 中 100vh 的滚动错位问题
在 iOS Safari 中，地址栏收起/展开时，100vh 不会动态重算，导致元素看起来“超出”或“留白”。这不是 bug，是 Safari 把地址栏高度算进了视口初始值里，但滚动后视口变化，vh 却卡在旧值。
使用场景：全屏轮播、登录页、单页应用根容器。
立即学习“前端免费学习笔记（深入）”；
- 临时解法：用 JS 监听
resize，动态设style.height = window.innerHeight + 'px' - 更稳方案：改用
min-height: 100vh+height: 100%组合，配合html { overflow-y: scroll }防止抖动 - 注意：不要在
body上直接用height: 100vh，它会抑制滚动条出现，导致内容不可见
与 flex 布局搭配时 height: 100vh 的优先级陷阱
当父容器是 display: flex，子元素设 height: 100vh，往往会被 flex 的默认拉伸行为覆盖——flex 会按剩余空间分配高度，而不是按 vh 值。
参数差异：flex: 1 和 height: 100vh 在同一元素上共存时，flex 通常胜出。
- 想强制用视口高度，就别给父容器设
flex，或把该子元素设为align-self: flex-start - 更推荐做法：父容器设
min-height: 100vh+display: flex，子元素用flex: 1，这样既响应视口，又保持弹性 - 性能影响：频繁触发
flex重排比纯vh开销略高，但日常页面几乎无感
替代方案：100dvh 是更好的选择吗？
100dvh 是 CSS 新增的“动态视口高度”单位，能响应地址栏显隐，Safari 16.4+、Chrome 105+、Firefox 110+ 支持。但它不是万能补丁。
兼容性影响：IE 完全不支持，iOS 15.x 及更早版本 Safari 也不认。
- 渐进增强写法：
height: 100vh; height: 100dvh;，后者覆盖前者 - 不能单独依赖
dvh做布局基线，尤其涉及 JS 计算高度时（window.innerHeight仍返回传统值） - 容易被忽略的点：CSS @supports 无法精准检测
dvh是否“动态”，只能查语法支持，不代表行为可靠
真正难的不是写哪行代码，而是判断这个“满屏”到底要响应什么：是初始加载？滚动过程？还是横竖屏切换？不同目标，解法完全不同。
