Flex布局下Footer粘底的正确写法是给根容器（如.wrapper）设display: flex、flex-direction: column和min-height: 100vh，再让main元素flex: 1，footer无需特殊定位；100vh比100%更可靠，因后者依赖高度继承链；移动端可用100dvh或JS降级处理键盘弹出问题。
Flex布局下Footer粘底的正确写法
用 display: flex 实现粘性 Footer，关键不是给 body 加 flex，而是给包裹整个页面内容的容器（比如 .wrapper）设为 flex 并控制子元素伸缩行为。
常见错误是直接在 html 或 body 上加 display: flex; flex-direction: column，但浏览器默认会忽略 body 的高度继承，导致 flex: 1 失效。
- 必须给根容器（如
.wrapper）显式设置min-height: 100vh，再配合flex: 1让主内容区撑满剩余空间 -
footer不要设margin-top: auto—— 正确做法是给主内容区（main）设flex: 1，它会自动把footer“顶”到底部 - 如果
main内容超长，flex: 1不会影响滚动，这点比position: sticky更可靠
html, body { height: 100%; margin: 0; }
.wrapper { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1; }
footer { /* 不需要特殊定位 */ }min-height方案里100vh和100%的区别
100vh 是视口高度，100% 是父元素高度——而 body 默认高度不继承，所以 height: 100% 在多数情况下等于 0。
想用 min-height 撑开内容区，必须确保高度链完整：从 html → body → 根容器，每一层都要显式声明高度或最小高度。
立即学习“前端免费学习笔记（深入）”；
-
html { min-height: 100% }不够，得写html { height: 100% }才能让body继承 - 更稳妥的是跳过继承链，直接用
min-height: 100vh，避免因父级未设高导致失效 - 注意
100vh在 iOS Safari 中可能包含地址栏高度，滚动时有轻微跳动，但 Footer 粘底逻辑不受影响
为什么sticky footer经常“悬空”或“压住内容”
所谓“悬空”，通常是 footer 被设了 position: absolute 且父容器没设 position: relative，导致它相对于 body 定位，而 body 高度不足；“压住内容”则多见于用了 margin-bottom: -Xpx 的负边距 hack，当内容变多时 Footer 就被盖住了。
- 绝对定位方案必须配
bottom: 0+ 父容器position: relative+ 显式高度约束，否则不可靠 - 负边距方案要求主内容区有固定高度或明确的
padding-bottom补偿，但响应式下极易失准 - 现代项目优先选 Flex 方案，兼容性已覆盖所有支持 Flex 的浏览器（IE11+ 需加
-ms-前缀，但仅限简单布局）
移动端键盘弹出时100vh失真的应对
iOS 和部分 Android 浏览器在软键盘弹出时会重算 vh，导致 min-height: 100vh 缩水，Footer 上浮。这不是 CSS bug，而是浏览器对“视口”的定义变化。
- 无法用纯 CSS 完美修复，但可监听
resize事件，用 JS 动态切换为min-height: 100%（前提是高度链已打通） - 更轻量的做法是改用
min-height: 100dvh（dynamic viewport height），Chrome 105+、Safari 16.4+ 支持，能响应键盘状态 - 如果必须兼容老版本，建议放弃“绝对粘底”，改为内容足够时自然沉底，不足时留白——用户滚动习惯比像素级对齐更重要
真正难的不是让 Footer 到底部，而是让它既不遮挡内容、也不在内容少时塌陷、还不在键盘弹出时错位。这些边界情况，往往比主逻辑更花时间调试。
