必须写全三段grid-template-rows: auto 1fr auto，父容器需设min-height: 100vh且html加height: 100%，main需overflow-y: auto并min-height: 0，页脚高度固定时建议用像素值替代auto。
grid-template-rows: auto 1fr auto 必须写全三段
很多人只写 grid-template-rows: 1fr auto，结果 footer 悬在半空——因为 Grid 会把 <header></header> 塞进第一行、<main></main> 塞进第二行，而 <footer></footer> 没有对应轨道，只能被挤到隐式行里，1fr 失效。必须显式声明三行：auto 1fr auto，确保三个直系子元素各占一行。
父容器高度必须锚定为 100vh 或继承链兜底
1fr 不是“剩余视口高度”，而是“父容器当前高度减去 auto 行之后的剩余空间”。如果父容器靠内容撑高（比如 body 高度只有 200px），那 1fr 分到的就只是 200px 减去 header/footer 后的一点点，中间区域根本撑不满。
正确做法是：
-
html上加height: 100%（Safari 兼容兜底） -
body设min-height: 100vh（推荐，比100%更稳）且margin: 0 - 生产环境可升级为
min-height: 100dvh（Chrome 105+/Safari 16.4+ 支持），避免 iOS 地址栏收放导致布局跳动
中间区域内容溢出时要主动加 overflow-y: auto
当 <main></main> 内容太多，你不想整个页面滚动、只想中间区域内部滚动，光靠 Grid 不够。必须显式控制：
- 给
<main></main>加overflow-y: auto - 确保它没设
height固定值，只依赖 Grid 分配的高度 - 必要时加
min-height: 0（防止某些浏览器下默认min-height: auto干扰滚动条出现）
页脚高度固定时建议用具体像素替代 auto
如果 footer 高度确定（比如 60px），直接写 grid-template-rows: auto 1fr 60px 更可靠。字体渲染微调、行高变化、甚至 emoji 插入都可能导致 auto 计算出的高度浮动，造成页脚轻微上浮或留白不均。像素值能彻底规避这类视觉抖动。
真正容易被忽略的是：这三个条件（html 高度兜底、body 的 min-height 和 margin、grid-template-rows 三段写全）只要漏一个，页脚就浮起来——它不是“大概贴底”，而是非全满足不可的硬性组合。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
