100vh在ios safari中“不够高”是因地址栏滚动导致视口动态变化，而vh取初始高度；应改用min-height: 100dvh，它能实时响应视口变化，chrome 105+、safari 16.4+、firefox 114+已支持。
为什么100vh在iOS Safari里经常“不够高”
不是Grid的问题，是vh单位本身在移动端的缺陷。Safari地址栏滚动时会动态缩放视口，100vh取的是初始加载时的高度，滚动后内容被切掉或底部留白。常见表现是按钮点不中、背景图断层、全屏轮播错位。
修复方式不是硬套100vh，而是改用min-height: 100dvh——dvh（dynamic viewport height）能随地址栏显隐实时更新高度。Chrome 105+、Safari 16.4+、Firefox 114+均已支持。
-
min-height: 100dvh比height: 100dvh更稳妥，旧版Safari对后者兼容性差 - 不能只给Grid容器设
100dvh，必须确保html和body有显式高度约束 - 如需兼容iOS 15.4以下，可JS兜底：
document.body.style.height = `${window.innerHeight}px`
为什么height: 100%在Grid容器上基本无效
height: 100%依赖父元素有确定的height值，而默认html和body没有显式高度，导致百分比失去计算基准。即使你写了#grid { height: 100%; display: grid; }，实际高度仍是0。
关键区别：1fr是Grid内部弹性分配逻辑，它不关心父级有没有height；但100%是CSS通用百分比机制，完全依赖父级尺寸。
- 错误写法：
body { height: 100%; } .grid { height: 100%; display: grid; }→ 仍可能塌缩 - 正确前提：
html, body { margin: 0; height: 100%; }+.grid { min-height: 100dvh; display: grid; } - 别混用：
height: 100vh和min-height: 100vh同时存在时，后者可能被忽略
为什么grid-template-rows: 1fr没让子元素撑满
1fr不是“强制填满”，而是“分配剩余可用空间”。如果Grid容器自身高度为0或未定义，1fr就无空间可分。常见现象：内容少时主体区域高度塌陷，背景只显示一小条。
必须保证两件事：容器有可计算高度、目标子项落在正确的轨道上。
- 容器需有
min-height: 100dvh（或至少min-height: 100vh） - 避免
overflow: hidden或contain: layout干扰高度计算 - 多行布局如
grid-template-rows: auto 1fr auto时，用grid-row: 2显式指定子项位置，别依赖隐式顺序 - 若主体内部要滚动，记得给它加
min-height: 0，否则1fr容器可能拒绝收缩
为什么背景图或颜色没铺满整个视口
根本原因常不在Grid本身，而在HTML结构高度链断裂。哪怕Grid容器已设min-height: 100dvh，如果html或body没设height: 100%，背景色/图依然只渲染到内容高度。
背景控制建议用::before伪元素单独处理，与Grid布局解耦：
- 给
body设position: relative，再用body::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(...) center/cover; z-index: -1; } - 避免直接在Grid容器上设
background，尤其当它有padding或border时容易露白边 - 响应式重定义
grid-template-areas时，记得同步调整伪元素的z-index层级
真正卡住人的地方往往不是Grid语法本身，而是高度链中某一级悄悄失效——比如忘了html { height: 100% }，或者用了100vh却没意识到iOS Safari会动态改视口。这些细节不报错，但布局就是不对。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
