直接给footer加margin-top: auto即可实现粘性底部，前提是父容器为display: flex且flex-direction: column，并确保html、body及包裹容器均设min-height: 100vh以提供高度基准，否则无剩余空间可分配。
直接给 footer 加 margin-top: auto 就能实现粘性底部，前提是父容器是 display: flex 且 flex-direction: column，并且高度链完整——否则这个 margin 压根没空间可“推”。
为什么 margin-top: auto 在 flex-direction: column 下才有效
Flex 的自动外边距（margin: auto）只在主轴方向起作用。margin-top: auto 要生效，主轴必须是垂直的，也就是 flex-direction: column。设成 row 时，margin-top 属于交叉轴，浏览器会忽略它，footer 就卡在顶部不动。
这不是 bug，是规范行为：主轴决定哪个方向的 margin-auto 有“吸力”。别试图用 justify-content: flex-end 替代——它会让所有子元素一起沉底，header 和 main 也会跟着掉下去。
父容器没撑满视口高度，margin-top: auto 就是摆设
绝大多数失效案例，问题不出在 footer 上，而在于 html 和 body 默认不占满 100vh。没有高度基准，margin-top: auto 就没剩余空间可分配。
立即学习“前端免费学习笔记（深入）”；
- 必须设置
html, body { min-height: 100vh; margin: 0; }（推荐min-height，避免内容超长时截断） - 包裹结构的容器（如
.app或.layout）要设display: flex; flex-direction: column; min-height: 100vh; - 不要只给
body加display: flex——它默认有 margin，且不是所有浏览器都允许直接对body做 flex 布局
footer 上同时设 height 和 margin-top: auto 容易出错
旧版 Safari 和部分安卓 WebView 对这种组合计算不稳定，可能导致主体区域（.main）高度塌缩，footer 悬在半空。
更安全的做法是：
-
footer只加margin-top: auto，其他样式（如height、padding）照常写 - 避免给
footer设flex-shrink: 0以外的弹性属性（比如flex: 1或flex-grow: 1），否则它会被拉伸，破坏固定高度语义 - 确保
footer是 flex 容器的**直接子元素**，且排在.main之后；中间插个div包裹，margin-top: auto就失效了
动态内容或键盘弹出后 footer 浮起来怎么办
Flex 高度重排依赖渲染时机。移动端键盘弹出、地址栏收缩、或异步加载内容后，min-height: 100vh 的基准可能滞后，导致 margin-top: auto 暂时“找不到底”。
临时缓解手段有限，但可提前规避：
- 不要依赖 JS 动态改
body高度——容易和 CSS 计算冲突 - 对可能触发高度突变的区域（如表单输入框），加
resize: vertical或监听resize事件手动触发重排（仅当必要） - 如果页面结构复杂（比如多层卡片 + 广告位），优先用
margin-top: auto而非flex: 1给中间区——前者对 DOM 变更更鲁棒
真正难处理的是视口缩放类变化，此时连 100vh 都不可靠，得靠媒体查询或 JS 补偿，但那已超出纯 Flex 布局的解决范围。
