Flex布局实现黏性页脚的关键是主内容区设flex:1撑开空间，使footer自然沉底；需重置html/body边距、body设min-height:100vh和display:flex column，footer保持flex-shrink:0并可加margin-top:auto双保险。
用 Flex 布局实现黏性页脚，关键不是把 footer “钉”在屏幕底下，而是让内容区域主动“撑开”空间，把 footer 自然推到整个页面的最末端。它既不会遮挡滚动内容，也不依赖 JavaScript，现代浏览器兼容良好。
基础结构必须满足三个前提
黏性页脚能生效，前提是整条布局链有明确的高度基准：
- html 和 body 清除默认边距：margin: 0; padding: 0;
- body 设为最小视口高度：min-height: 100vh;（不用 height: 100vh，否则长内容会被截断）
- body 设置弹性布局：display: flex; flex-direction: column;（不建议直接在 body 上写 display: flex 的旧版 Safari 兼容问题，可包一层 .app 容器）
主内容区必须设 flex: 1
footer 不是靠自己“长大”来沉底的，真正起作用的是它上面那个主内容容器（比如 <main> 或 .content）：
- 给主内容区加 flex: 1;（等价于 flex-grow: 1; flex-shrink: 1; flex-basis: 0）
- 它会自动占据父容器（body）中所有剩余可用高度
- 这样 footer 就被“顶”到了整个页面的最底部，而不是视口底部
- 切勿给 footer 加 flex: 1 —— 否则它会拉伸变高，甚至溢出屏幕、盖住内容
footer 本身要保持“不抢空间”
footer 应该是轻量、守序的参与者：
立即学习“前端免费学习笔记（深入）”；
- 无需设 height，保持默认 flex: none（即 flex-grow: 0; flex-shrink: 0; flex-basis: auto）
- 推荐显式写 flex-shrink: 0; 防止被压缩（尤其在窄屏或字体放大时）
- 加 margin-top: auto; 是更鲁棒的后备方案：即使主内容区没设 flex: 1，只要父容器是 column 方向 flex，footer 仍会自动沉底
- 可同时写 main { flex: 1; } + footer { margin-top: auto; }，双保险
别踩这些常见坑
很多“粘不住”的问题，其实出在细节干扰上：
- body 默认有 margin，Safari 下尤其明显——必须重置 margin: 0
- 用 height: 100% 替代 min-height: 100vh？不可靠，高度继承链一断就失效
- 误用 position: sticky 或 position: fixed：前者对页脚无效（无“进入视口”过程），后者会让页脚悬浮遮内容
- footer 内文字贴边难读？记得加 padding 或 line-height，别只盯着布局忽略可读性
