用grid-template-rows: 1fr auto可实现页脚自适应底部对齐，前提是html和body设height: 100%、根容器设min-height: 100vh且display: grid，dom顺序为header→main→footer，页脚避免脱离文档流。
用 grid-template-rows: 1fr auto 是目前最简、最稳的方案，它不依赖页脚固定高度，也不需要 JS 计算，内容少时页脚贴底，内容多时自然下移，完全符合文档流逻辑。
为什么 grid-template-rows: 1fr auto 能真正自适应高度
关键在 1fr 不是“占满视口”，而是“吸收父容器剩余可用高度”；auto 则让页脚按自身内容撑开——哪怕版权文字换行、图标动态加载、响应式断点导致高度变化，都不用改 CSS。它天然规避了 min-height: 100vh 在移动端缩放后失效、或内容超长时页脚被截断的问题。
- 必须给
html和body设height: 100%，否则 Grid 容器无高度参考，1fr直接退化为 0 - 布局容器（如
.layout）要设display: grid，且显式声明grid-template-rows: 1fr auto - DOM 顺序必须是
header→main→footer，顺序错乱会导致 Grid 行错位 - 页脚内避免用
float或position: absolute，否则内容撑不开高度；可用overflow: hidden包裹防塌陷
flex-grow: 1 放在 main 上才有效，不是页脚
很多人给 footer 加 flex-grow: 1，结果页脚暴涨或没反应——因为 flex-grow 是分配剩余空间，不是吸附底部。它只对直接父容器为 display: flex; flex-direction: column 的子元素起作用，且必须由中间区域“吃掉”空间，才能把页脚顶下去。
- 根容器（如
body）需设min-height: 100vh，不能只写height: 100vh，否则内容超长时页脚会被裁剪 -
main元素设flex-grow: 1，footer不设 flexGrow，只设margin-top: auto更可靠 - 同时设
flex-grow和margin-top: auto在部分浏览器中会冲突，渲染异常 - 若需固定
header，可改用grid-template-rows: auto 1fr auto，但此时main必须加overflow-y: auto
position: sticky 底部需要滚动空间才能生效
position: sticky; bottom: 0 看似轻量，但它不是“粘在页面底”，而是“粘在滚动容器底”。如果父容器没足够高度、或内容没溢出，它就和普通 static 一样静止不动——常被误认为失效。
- 必须确保页脚的父级（通常是
main）有足够滚动空间，常见做法是设min-height: calc(100vh - header高度 - footer高度) -
sticky对父容器的overflow敏感：父级若设overflow: hidden或scroll，可能中断粘性行为 - 无法处理“内容极少 + 页脚高度动态”场景，比如小屏下版权文字两行变三行，
calc()值就得重算 - 不推荐用于全局页脚，更适合局部模块（如表格底部工具栏）
真正难的不是选哪种方案，而是意识到：页脚高度不可控时，任何硬编码高度（height: 60px）、硬写 calc()、或靠 position: absolute 加 padding-bottom 补救，都会在响应式切换或内容动态加载时露馅。Grid 的 1fr auto 和 Flex 的 flex-grow: 1 + margin-top: auto 是仅有的两种能“不管页脚多高、内容多少，都自动对齐”的原生机制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
