CSSGrid全屏布局vh应用技巧

本文深入剖析了CSS Grid实现全屏布局时在移动端（尤其是iOS Safari）遭遇的典型陷阱，重点揭示了100vh单位因浏览器地址栏动态显隐导致高度计算失准的问题，并给出以min-height: 100dvh为核心、配合html/body显式高度约束和合理grid-template-rows（如auto 1fr auto）的现代解决方案；同时澄清了1fr与百分比高度的本质区别，提供了键盘弹出时防止布局错乱的实用技巧（如scroll-margin-top），并强调兼容性兜底策略——这不仅是一份Grid布局指南，更是面向真实移动Web场景的精细化CSS工程实践手册。

为什么 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 = ${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 慢。

到这里，我们也就讲完了《CSSGrid全屏布局vh应用技巧》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！