页脚贴底失败主因是html和body未设height:100%清除默认margin，导致高度基准缺失；应设html, body { margin: 0; padding: 0; height: 100%; }，再用wrapper包裹并设min-height: 100vh + display: flex。
页脚贴底失败，90% 是因为父容器根本没撑满视口高度——不是 flex 写错了，而是 html 和 body 没清干净、没设对高度基准。
html 和 body 必须重置并设高度基准
浏览器默认给 body 加了 8px margin，且 body 高度由内容决定，不设基准就不可能“撑满”。min-height: 100vh 必须落在能传导给子元素的容器上。
-
html, body { margin: 0; padding: 0; height: 100%; }——height: 100%是关键，它让body能继承html的高度（而min-height: 100vh单独用在body上，在旧版 Safari 或某些嵌套场景下会失效） - 不要只写
body { min-height: 100vh; }，它在 iOS Safari 地址栏收起/展开时会抖动；height: 100%+html { min-height: 100%; }更稳 - 避免直接在
body上写display: flex：部分第三方脚本会重置它，旧版 Safari 对body的 flex 支持也不一致
用 wrapper 替代直接操作 body
加一层 <div class="app"> 包裹 header、main、footer，把所有 flex 样式都放在这层上，可控性高、调试方便、兼容性好。
.app { display: flex; flex-direction: column; min-height: 100vh; }-
main { flex: 1; }—— 适合内容区需滚动填满剩余空间的场景；若main内部也是 flex 容器，可能触发旧版 Chrome 渲染 bug，此时改用margin-top: auto更稳妥 -
footer { flex-shrink: 0; }—— 显式禁止收缩，防止内容少时被压缩变形
flex: 1 和 margin-top: auto 怎么选
二者都能把页脚推到底，但行为逻辑不同，适用条件也不同。
立即学习“前端免费学习笔记（深入）”；
-
flex: 1是让主内容区主动伸展，吃掉所有剩余空间；适合需要内容区始终占满可用高度、且内部不嵌套复杂 flex 布局的场景 -
margin-top: auto是利用 flex 的自动外边距“吸顶”特性，把main往上顶，从而把footer推到底；它不强制拉伸内容区，对子元素 flex 行为干扰更小 - 如果页面有固定头部（
position: fixed），main必须手动预留顶部空间：padding-top: 60px或margin-top: 60px（值≈ header 高度），否则内容会被遮挡
移动端和动态内容的隐藏陷阱
短页面贴底没问题，但一加滚动、一换设备，问题就冒出来。
- iOS Safari 的
100vh在地址栏收起/展开时会跳变，推荐用100dvh替代（Safari 16.4+ 支持），降级方案仍用height: 100%+html { min-height: 100%; } - 如果页脚里有动态加载的内容（比如异步渲染的版权信息），
flex: 1可能导致高度重算延迟，出现短暂上浮；margin-top: auto响应更快 - 横向滚动条存在时，
100vh不会自动减去滚动条宽度，可能导致右侧溢出；用width: 100vw配合box-sizing: border-box更安全
真正卡住人的从来不是 flex 属性本身，而是 html/body 的高度继承链是否完整、wrapper 是否被意外截断、以及移动端那个看不见摸不着的地址栏高度变化。
