应使用min-height: 100vh替代height: 100vh，并设置html、body { height: 100%; margin: 0; }，Grid容器设min-height: 100vh，页脚用固定高度或auto，主体用1fr，优先采用grid-template-rows: 64px 1fr 64px或auto 1fr auto配合height: 100%基准。
Grid容器高度设为100vh后页脚被截断
固定头部页脚的网格布局，最常见问题是height: 100vh看似填满视口，但实际会把页脚“挤出”可视区域——尤其当内容少、页脚有margin或padding时。根本原因在于100vh包含整个视口高度，而grid-template-rows若用auto或fit-content()定义页脚，浏览器可能不收缩头部/主体去腾空间。
- 优先用
min-height: 100vh代替height: 100vh，给容器留出“撑开”余地 - 头部和页脚用
min-height或固定height（如64px），避免依赖内容高度波动 - 主体区域必须用
flex: 1或grid-row: 2 / -1+min-height: 0，否则在内容少时无法收缩
grid-template-rows中fr单位导致页脚不固定
1fr会让主体占满剩余空间，听起来合理，但一旦内容超出视口，页脚就会被推到页面底部以下——它“固定”在文档流末端，而非视口底部。真正的固定需要脱离文档流约束，或靠网格轨道强制锚定。
- 正确写法：
grid-template-rows: 64px 1fr 64px（头部/主体/页脚三行） - 如果头部高度不固定，改用
grid-template-rows: auto 1fr auto，但必须给body和html加height: 100%，否则1fr无参考基准 - 避免
minmax(0, 1fr)滥用：它只在内容溢出时生效，对短内容无效，且IE不支持
body没设height: 100%导致Grid高度计算失败
CSS Grid的高度继承链很脆弱。html默认height: auto，body又默认display: block，结果100vh或1fr在子元素上根本没作用对象——浏览器找不到“100%”是相对于谁的。
- 必须显式设置：
html, body { height: 100%; margin: 0; } - Grid容器（比如
.layout）再设height: 100%或min-height: 100vh - 如果用了CSS自定义属性控制高度（如
--header-height），记得在:root里定义，并确保它被html或body继承
移动端iOS Safari中100vh实际高度偏大
iOS Safari的100vh会把地址栏高度也算进去，滚动后地址栏收起，导致页面“跳动”，页脚位置错乱。这不是Grid问题，而是视口单位本身的缺陷。
立即学习“前端免费学习笔记（深入）”；
- 临时解法：用
100dvh（动态视口高度），Chrome 105+/Safari 16.4+ 支持，但老版本需降级 - 兼容方案：JavaScript读取
window.innerHeight并写入CSS变量，再在Grid中用var(--vh) - 更稳做法：放弃
100vh，用min-height: 100%+ Flexbox fallback（Grid不支持时兜底）
Grid实现固定页脚真正难的不是写几行grid-template-rows，而是高度继承链里任何一个环节漏掉height: 100%，或者没处理min-height与overflow的交互，都会让页脚飘走。iOS的100vh问题更是上线前才暴露的典型。
