grid-template-rows: auto 1fr auto 不生效的根本原因是 html 和 body 高度未设为 100%，导致 1fr 缺乏计算基准；必须显式设置 html{height:100%}、body{min-height:100vh;display:grid;grid-template-rows:auto 1fr auto}，且页头、主内容、页脚须为 body 直接子元素。
直接用 grid-template-rows: auto 1fr auto 就能实现——但前提是 html 和 body 高度必须设为 100%，否则 1fr 根本没参考基准，页脚会塌在顶部或被截断。
为什么 grid-template-rows: auto 1fr auto 不生效？
根本卡点是高度继承链断裂：浏览器默认 html 和 body 的 height 是 auto，1fr 在没明确父容器高度时无法计算“剩余空间”。结果就是主体不撑开、页脚贴着头部下面，或者整个布局高度只有内容本身那么高。
必须显式补全这三行：
html { height: 100%; }body { margin: 0; min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; }- 确保页头、主内容、页脚是
body的直接子元素（不要嵌套在额外div里）
页脚高度不确定时，auto 还是固定值？
用 auto 更安全，尤其当页脚含换行文本、响应式字体或动态插入内容时。但要注意两点：
- 如果页脚内有
padding或margin，它会影响auto计算，建议统一用padding控制留白，避免margin - 若页脚需严格对齐底部（比如和侧边栏底边平齐），可改用固定高度（如
64px），配合grid-template-rows: 64px 1fr 64px，更可控
移动端 iOS Safari 中页脚“跳动”怎么办？
这是 100vh 的固有缺陷：Safari 把地址栏高度也算进视口，滚动后地址栏收起，导致 min-height: 100vh 突然变小，页脚上跳。临时解法是换用 100dvh（Chrome 105+/Safari 16.4+ 支持），但兼容性不够时得降级：
- JavaScript 动态写入：
document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`)，然后在 CSS 中用min-height: calc(var(--vh, 1vh) * 100) - 更稳但略重的 fallback：给
body加display: flex; flex-direction: column;，再用flex: 1推页脚——Grid 失效时自动退到 Flexbox
真正容易被忽略的是：Grid 布局一旦嵌套多层容器，1fr 就极易失效；最简方案永远是让 body 直接当 Grid 容器，不加中间 wrapper。另外，别在页脚里用 position: absolute 或 fixed——它会脱离 Grid 轨道，彻底破坏“固定在底部”的语义。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
