必须为body设min-height:100vh并清除margin，否则1fr无空间可分；grid-template-rows需为auto 1fr auto三行结构；grid-template-areas须按行声明如"header""main""footer"；main需设min-height:0和overflow-y:auto以支持内部滚动。
body 必须设 min-height: 100vh 且清除 margin
不这么做，grid-template-rows 里的 1fr 就没空间可分——容器本身高度塌缩，页脚会卡在内容末尾，而不是贴底或被推走。
常见错误现象：footer 在短内容时上浮、长内容时滚动条出现在 main 内部而非整个页面、底部留白或撕开白边。
-
html, body { margin: 0; }必须写，浏览器默认body有 8px 外边距 - 用
min-height: 100vh比height: 100vh更稳妥：内容超长时不会强制裁剪 - 不要只给 wrapper 设 Grid，直接作用于
body最简；若用 wrapper，得确保它继承了100vh高度
grid-template-rows: auto 1fr auto 是核心行高分配
1fr 不是“占满视口”，而是“占满网格容器剩余可用高度”。上下两行设为 auto，中间用 1fr，才能让主体撑开、页脚锚定。
容易踩的坑：grid-template-rows: auto 1fr 缺少页脚行 → 页脚无法参与布局计算；grid-template-rows: 60px 1fr 40px 虽能用，但失去响应性，页脚高度变化时需手动调值。
立即学习“前端免费学习笔记（深入）”；
- 三行结构必须显式写出：header 行、main 行、footer 行
- 避免在网格容器上设
padding，它会压缩内部可用空间，导致1fr分配变小 - 如果页脚需要“视觉上被推离屏幕”（比如全屏应用隐藏页脚），可将 footer 所在行设为
0，再用height: min-content强制渲染
grid-template-areas 要按行声明且区域名严格匹配
区域名大小写敏感，引号内空格分隔，每行一个引号——写错格式会导致 grid-area 失效，元素不进对应轨道。
典型错误：grid-template-areas: "header main footer"（单行三列） vs 正确的三行单列："header" "main" "footer"。前者会让页头页脚和主体并排，完全偏离目标。
- 每个直接子元素必须声明
grid-area，值与模板中完全一致 - 移动端想让侧边栏叠在主内容上？不能只改
grid-column，得重写grid-template-areas，例如"header" "main" "footer" - 区域名建议全小写、无空格、无特殊字符，降低拼写风险
main 内容溢出时滚动行为由容器控制
滚动条该出现在哪，取决于谁设了 overflow-y: auto。默认整个页面滚动；若希望仅 main 滚动，就得给它设 min-height: 0 和 overflow-y: auto ——否则 Flex/Grid 子项默认最小高度为内容高度，会撑破容器。
性能影响：在 main 内嵌套另一个 display: grid 或 flex 时，若没设 min-height: 0，会导致内部滚动失效或布局错乱。
-
main { min-height: 0; overflow-y: auto; }是安全组合 - 避免对
body设overflow: hidden，否则全局滚动被禁用 - 如果
main里用了绝对定位元素，记得设position: relative，否则定位基准错乱
1fr 就只是个摆设。 
