CSS网格实现全屏布局_vh单位与Grid的完美结合案例

100vh 在移动端常“不够高”是因为 safari 地址栏动态遮盖视口，导致 100vh 取初始高度而滚动后错位；应改用 min-height: 100dvh，并确保 html/body 显式设高，grid 才能正确布局。

为什么 100vh 在移动端经常“不够高”？

因为 Safari（尤其是 ios）的地址栏和底部工具栏会动态遮盖/释放视口高度，100vh 取的是初始布局时的视口高度，滚动后可能被截断或留白。这不是 Grid 的问题，而是 vh 单位本身的局限。

• 实际场景：全屏轮播、登录页、单页应用根容器
• 真实表现：iOS 上滚动后底部空白、内容被切掉、按钮点不中
• 替代方案不是换单位，而是用 min-height: 100dvh（推荐）或 height: 100svh
• dvh = dynamic viewport height，浏览器会随地址栏显隐实时更新，目前 chrome 105+、Safari 16.4+、firefox 114+ 支持；svh 是 small viewport height，取“最小可能视口”，更保守但兼容略差

Grid 全屏布局必须设 html 和 body 高度吗？

必须。Grid 容器的高度依赖父级约束，而默认 html 和 body 没有显式高度，100vh 或 100dvh 就没意义。

• 错误写法：main { display: grid; height: 100vh; } —— 如果 body 没撑开，main 高度就是 0
• 正确顺序：

  html, body { margin: 0; height: 100%; } body { display: grid; min-height: 100dvh; }

• 不要用 height: 100dvh 直接设在 body 上（部分旧版 Safari 不认），优先用 min-height
• 若项目需支持 iOS 15.4 以下，可降级为 js 动态设置：document.body.style.height = <code>${window.innerHeight}px，但仅作兜底

grid-template-rows: 1fr 和 100% 有什么区别？

1fr 是 Grid 的弹性分配单元，基于可用空间计算；100% 是相对父元素高度的百分比，父元素若无高度则无效。

• 常见坑：grid-template-rows: 100% 在全屏布局里基本没用，因为父容器高度来自 min-height: 100dvh，而百分比高度只对 height 生效，不对 min-height 生效
• 正确组合：grid-template-rows: 1fr + min-height: 100dvh，让 Grid 自动填满剩余空间
• 多区域场景示例：grid-template-rows: auto 1fr auto —— 头部自适应、主体占满剩余、底部自适应，这才是 Grid 的优势所在

键盘弹出时 iOS 页面被顶起，怎么防止 Grid 布局错乱？

这不是 Grid 的 bug，是 iOS webkit 的输入框聚焦行为触发了视口缩放与重排。Grid 容器本身不会“错乱”，但子元素可能因视口突变而位置偏移或溢出。

立即学习“前端免费学习笔记（深入）”；

• 关键动作：监听 focusin 和 blur，临时给 body 加 position: fixed（慎用）或用 scrollIntoView({ block: 'nearest' }) 控制焦点位置
• 更稳妥做法：避免让输入框位于视口底部；用 viewport meta 的 height=device-height 无济于事，已被现代 Safari 忽略
• 真实兼容建议：对 input 和 textarea 添加 scroll-margin-top: 60px，确保聚焦时内容不被键盘盖住

有些细节没法靠一个 css 属性解决，比如 dvh 的渐进支持、iOS 键盘和视口的博弈、Grid 子项的内在尺寸继承逻辑——这些地方一旦漏掉，调试起来反而比 flex 慢。