1fr不生效是因为父容器缺乏明确高度，必须设置height: 100vh或确保html/body逐层height: 100%；中间区需同时加overflow-y: auto和min-height: 0才能实现滚动，否则内容会撑破布局。
直接用 grid-template-rows: auto 1fr auto 配合 height: 100vh 就能实现——但中间区域不加 overflow-y: auto 或没处理 min-height，滚动就会失效或撑破布局。
为什么 1fr 不生效？父容器高度必须明确
1fr 是按“可用空间”分配的，不是按“内容高度”。如果父容器没设高，它就塌成 0。
- 必须给 Grid 容器设
height: 100vh（最常用），或确保祖先链有明确高度（如html, body { height: 100%; }） - 避免只靠子元素内容撑高容器——
1fr对这种“被动高度”无响应 - 移动端要注意：
100vh在 Safari 或 Chrome 地址栏收放时可能跳变，可改用100dvh（支持较新）
中间区域滚动不了？检查 overflow 和 min-height
即使 1fr 分到了高度，内容溢出也不会自动滚动——必须显式开启，并防住默认最小尺寸干扰。
- 给中间区域（比如
.main）加overflow-y: auto - 务必加
min-height: 0（尤其当它是 Grid 子项且嵌套在 Flex/Grid 中时），否则浏览器会按内容最小高度限制滚动区域 - 不要给中间区设
height或max-height，它应完全依赖 Grid 分配的高度
auto 行的实际表现：不是“固定像素”，而是“内容自适应”
顶部和底部用 auto，不代表它们高度不可控——只是不写死，但可通过其他方式约束。
- 顶部导航栏里文字多、行高大，
auto就会变高；想稳定，就给.header设height或min-height - 底部有 padding/margin 也会被算进
auto高度，调试时用 DevTools 查看 computed height 更准 - 如果页脚内容极少却占太多空间，可能是盒模型（border/padding）或字体渲染导致，加
box-sizing: border-box统一控制
真正容易忽略的是 min-height: 0 ——它不像 overflow 那样直观，但缺了它，哪怕结构全对，中间区域也大概率不滚动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
