应使用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%”是相对于谁的。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 必须显式设置：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问题更是上线前才暴露的典型。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！