用 vh 设置 grid-template-rows 为什么高度不随窗口缩放？
因为 vh 是相对于视口高度的单位，但父容器若没撑满视口，子网格的 vh 计算会失效。常见于 body 或 html 有默认 margin、未设 height: 100%，或外层包裹了非全高容器。
- 确保
html和body都设为height: 100%且margin: 0 - 网格容器本身需设
height: 100vh或继承自 100% 高度的父级（不能只靠grid-template-rows: 30vh 40vh 30vh就指望它自动占满） - 若容器在某个 flex / grid 父级中，父级必须显式提供高度约束，否则
vh在子级中仍按原始视口算，但布局可能被截断
grid-template-rows: 1fr 2fr 30vh 混用 fr 和 vh 的实际效果
这种写法合法，但行为容易误判：所有 fr 行会先瓜分「剩余可用高度」，而 vh 行直接按视口比例固定，剩余高度 = 总高度 − 所有固定高度行（含 vh、px、em 等）。
- 如果总
vh加起来超过 100，比如60vh 60vh，第二行会被压缩甚至溢出，浏览器不会报错，但内容可能被裁切 -
1fr不等于33.33vh，它只在“减去固定行后还有空间”时才生效；若只有30vh固定行，剩下 70vh 才由fr分 - 移动端 Safari 对混合单位的渲染偶尔有微小偏差（尤其键盘弹出导致视口高度突变），建议加
min-height: 100vh容错
响应式断点下如何安全切换 grid-template-rows？
别在媒体查询里只改 grid-template-rows，必须同步控制容器高度，否则断点切换时会出现空白或重叠。
- 用
@media (max-width: 768px)时，把容器高度从100vh改成auto或fit-content，再配grid-template-rows: auto 1fr auto，避免小屏上顶部导航+内容+底部被强行压进 100vh 导致溢出 - 若保留
vh，建议用min-height: 100vh而非height: 100vh，防止内容超长时无法滚动 - CSS 自定义属性可简化维护：
--header-h: 60px; --main-h: calc(100vh - var(--header-h) - 80px);，然后grid-template-rows: var(--header-h) var(--main-h) 80px
移动端键盘弹出导致 vh 值突变怎么办？
iOS Safari 和部分安卓浏览器在软键盘弹出时会把 vh 基于「缩小后的视口」重新计算，导致网格突然塌陷——这是最隐蔽也最难调试的问题。
立即学习“前端免费学习笔记（深入）”；
- 不要依赖纯
vh做关键布局，尤其是输入框附近区域。可用100dvh替代（Chrome 105+、Safari 16.4+ 支持），它基于「动态视口高度」，键盘弹出会自动修正 - 降级方案：监听
resize事件，检测window.innerHeight变化幅度 > 100px 时，临时切到minmax(0, 1fr)或固定px值 - 测试时务必真机验证，模拟器常忽略键盘对
vh的影响
实际项目里，100dvh 是目前最干净的解法，但兼容性得兜底；vh 本身没问题，问题总出在“以为它独立工作”，其实它极度依赖上下文高度链。
