如何用CSS Grid让页脚始终固定在底部？

必须同时满足父容器有可测量高度、显式定义三行模板（如auto 1fr auto）、页脚不脱离文档流；grid-row: span -1无效因规范只接受正整数，真正锚定底部需用grid-row-end: -1配合显式模板。

能，但必须同时满足三个条件：父容器有可测量高度、显式定义三行模板、页脚不脱离文档流。单独写 grid-row: span -1 或 align-self: end 都无效——这不是写法不对，而是 Grid 的分配逻辑根本没启动。

为什么 grid-row: span -1 一点用都没有

CSS Grid 规范只接受正整数作为 span 的值。grid-row: span -1 会被浏览器静默忽略，不报错也不生效。你看到页脚没动，不是它“没执行”，而是压根没被解析。

1. grid-row: 2 / span 2 合法：从第 2 条网格线开始，向下占 2 行轨道
2. grid-row: span -1 非法：直接丢弃，等价于没写这行
3. 真正能锚定底部的是负索引终点，比如 grid-row-end: -1，但它依赖显式的 grid-template-rows

grid-template-rows: auto 1fr auto 为什么必须写全三段

这行声明把语义固定为「头部自适应 → 主体吃剩余 → 底部自适应」。1fr 不是魔法，它只在有明确剩余空间时才起作用；而这个“剩余”是由前后两个 auto 行共同界定的。

1. 漏掉第一个 auto（比如写成 1fr auto），页眉会塌进主体区，破坏结构顺序
2. 漏掉最后一个 auto（比如写成 auto 1fr），页脚就没了独立轨道，可能被拉伸或挤出视口
3. 写成 auto 1fr 60px 可以，但页脚就不再是“自适应高度”，而是固定 60px —— 这没问题，只是要清楚取舍

为什么页脚还是悬在半空？检查这三处高度约束

1fr 分配失败，90% 是因为某一层容器高度不可测。Grid 不会凭空造高度，它只按已有空间切分。

1. html 和 body 都得设 min-height: 100vh（推荐）或 height: 100%；只设一个没用
2. 网格容器（通常是 body）必须设 display: grid + min-height: 100vh；仅靠继承不够稳定
3. 避免给 body 加默认 margin，也别在主内容区或页脚里写 height: 100% —— 这会干扰 auto 行的自然计算

页脚内容变多后撑开、贴不住底了怎么办

这不是 1fr 失效，而是页脚自身高度失控。Grid 把它当 auto 处理，它就真按内容长高，把底部顶下去了。

1. 如果页脚需滚动，加 max-height: 200px + overflow-y: auto，内部自己滚
2. 避免对页脚设 height 或 min-height，否则会压制 auto 行的弹性行为
3. 真要固定高度（如版权栏），就用 grid-template-rows: auto 1fr 60px，但记得同步删掉页脚里所有可能撑高的样式

最常被跳过的点：所有基于 1fr 的垂直分配，都依赖父容器高度可测量。没有 min-height 或视口单位兜底，1fr 就只是个空名号——它不会帮你撑高容器，只会安静地分一块不存在的空间。