Flex布局实现Sticky Footer的最小必要配置是：html和body设height: 100%，外层容器设display: flex、flex-direction: column和min-height: 100vh，主内容区设flex: 1；缺一不可，否则footer悬空或错位。
flex布局实现 sticky footer 的最小必要配置
最稳、最现代、也最容易出错的方案就是 display: flex + min-height: 100vh。它不依赖 footer 高度固定，也不需要额外 DOM 元素，但必须满足三个硬性条件：
-
html和body必须设height: 100%（不是min-height），否则100vh在某些场景下会失效 - 外层容器（通常是
body或一个 wrapper）要设display: flex+flex-direction: column+min-height: 100vh - 主内容区（比如
.content）必须设flex: 1，不能用flex-grow: 1单独写——老版本 Safari 对后者支持不全
常见错误是只给 body 设了 flex，却忘了 html 的 height: 100%，结果在 iOS Safari 上 footer 悬空；或者把 flex: 1 写成 flex: auto，导致内容区不撑开。
position: absolute 方案为什么容易遮挡内容
用 position: absolute + bottom: 0 看似简单，但实际踩坑率极高。根本原因是：bottom: 0 是相对于最近的「定位祖先元素」，不是视口底部。
- 如果父容器没设
position: relative或高度，footer会相对于body定位，而body高度可能小于视口——这时footer就压在内容上 - 用户缩放字体、开启系统大字号、或使用屏幕阅读器时，文字行高变大，
footer很可能直接盖住最后一段文字 - Vue/React 中异步加载内容时，初始渲染阶段
main高度为 0，absolute的footer就卡在顶部不动
除非你明确控制了所有父容器高度且页面无动态内容，否则别用这个方案。
立即学习“前端免费学习笔记（深入）”；
calc() 计算内容高度时的间距陷阱
当用 min-height: calc(100vh - 60px) 给内容区设高时，60px 不能只等于 footer 高度。
- 必须把
footer的margin-top、border-bottom、padding-bottom全部加进去，否则内容和 footer 之间会出现重叠或空白 - 如果
footer使用了box-sizing: border-box，它的height已含内边距，但calc()里仍要按视觉占用空间来算 - 响应式断点切换时，footer 高度变化（比如从 60px → 80px），
calc()值必须同步改，否则在平板上就错位
示例：.content { min-height: calc(100vh - 84px); } —— 这 84px 可能来自 footer 的 height: 60px + margin-top: 24px。
footer 高度不确定时唯一靠谱的解法
当 footer 里有换行文字、可展开区域、或动态插入的按钮时，它的高度是弹性的。此时只有 flex 方案能自适应。
- 不要给
footer设固定height，让它自然包裹内容 - 确保
.content的flex: 1能正确生效：它必须是 flex 容器的直接子元素，且不能被overflow: hidden或max-height截断 - 如果内容区用了
grid或多列布局，注意flex: 1只作用于主轴方向——垂直方向撑开没问题，水平方向不受影响
真正容易被忽略的点是：flex 布局对嵌套层级极其敏感。哪怕多包了一层 div，又没给它设 flex: 1，整个 sticky 效果就废了。
