页脚不触底的根本原因是容器高度未撑满视口，需同时设置html和body为height: 100%、网格容器min-height: 100vh，并避免主内容区意外padding/margin及页脚内height: 100%等干扰。
grid布局中页脚不触底的常见原因
多数人写 grid-template-rows: 1fr auto; 后发现页脚悬在半空，不是贴底——根本原因是容器高度没撑满视口。Grid 的 1fr 只按父容器可用高度分配，如果父容器本身没设高（比如 body 或 html 没设 height: 100%），1fr 就只能分到内容实际高度，页脚自然“浮”起来。
必须设置的三层高度约束
缺一不可，漏掉任意一层都会让 1fr 失效：
-
html和body都要设height: 100%（或min-height: 100vh） - 网格容器需设
display: grid+min-height: 100vh（推荐用100vh，比100%更可靠） - 主内容区不能有意外的
margin或padding撑开高度，尤其注意body默认外边距
1fr 与 auto 的行为差异和陷阱
1fr 是剩余空间分配器，不是“填满除页脚外所有空间”的魔法；auto 是内容高度，但若页脚内有 flex 或绝对定位元素，它可能无法正确反馈自身高度。
- 页脚里避免用
height: 100%或min-height，会干扰auto计算 - 若页脚需要最小高度（如 60px），改用
min-height: 60px，保留auto的弹性 - 不要混用
fr和固定值（如100px）在同一条轨道上，除非你明确知道剩余空间怎么算
兼容性与移动端注意事项
IE11 不支持 1fr 在 minmax() 外单独使用，但现代项目基本可忽略；真正容易翻车的是 ios safari 的 100vh —— 地址栏收放时会触发重绘，导致页脚跳动。
立即学习“前端免费学习笔记（深入）”；
- 生产环境建议用
min-height: 100dvh替代100vh（chrome 105+/Safari 16.4+ 支持） - 降级方案：用 js 监听
resize动态设style.height，但仅当必须支持旧 Safari 时才加 - 安卓 webview 中若出现滚动条遮挡页脚，检查是否误加了
overflow-y: scroll到 body
最常被忽略的一点：grid 容器的 align-content 默认是 stretch，但如果父容器有 align-items: center 之类干扰，1fr 也会失效——别只盯着 grid 自己，往上查两层样式继承链。