flexbox方案最可靠：html和body设height:100%，body用display:flex+flex-direction:column+min-height:100vh，主内容设flex:1撑满剩余空间，footer保持文档流即可。
为什么 position: sticky; bottom: 0 在 <footer></footer> 上基本不生效
这不是你写错了，是浏览器根本没打算让它工作。iOS Safari 15.4 之前完全忽略 bottom 方向的 sticky；即使新版 Safari 或 Chrome 支持，它也只在「父容器可滚动 + 有明确高度」时才可能触发——而 默认既不可滚动（内容未溢出时），也没有显式 height，<footer></footer> 直接挂在 body 下，就等于没爹没妈。结果就是：样式写了，控制台没报错，但页脚纹丝不动，或卡在顶部附近。
用 Flexbox 实现真正可靠的“粘性页脚”
核心不是让 footer 自己找位置，而是让主内容区域主动占满剩余空间，把 footer “推”下去。这需要三处关键配合：
-
html和body都必须设height: 100%（仅min-height在旧版 Safari 会失效） -
body设display: flex; flex-direction: column; min-height: 100vh - 主内容容器（如
<main></main>或<div class="content">）设 <code>flex: 1—— 它会吃掉所有空余高度 -
<footer></footer>保持默认文档流位置，不加position、不设固定height，靠padding控制内边距即可 -
body显式设position: relative—— 否则footer会向上找祖先定位，基准不可控 -
footer必须写全bottom: 0; left: 0; width: 100%，缺一不可；否则可能右偏、宽度不足或悬在半空 - 该方案下，页脚脱离文档流，长页面中不会随内容自然下移，容易遮挡正文末尾 —— 不适合版权栏这类需语义化、可访问的内容
- 弃用
min-vh-100，改用显式min-height: 100vh - 外层容器（如
<div class="d-flex flex-column">）包裹内容，别直接套在 <code>上 - 确保
body本身有height: 100%，否则 flex 布局在 Safari 旧版本里会塌
绝对定位方案能用，但必须满足两个硬条件
如果你坚持用 position: absolute，那必须同时满足：
移动端视口高度不准？别信 min-vh-100
Bootstrap 的 min-vh-100 类在 iOS Safari 上有已知缺陷：初始加载时地址栏未收起，视口高度被高估，导致页脚被“顶”到屏幕外；滚动后重算又突然上跳。更稳的做法是：
真正难的不是写对那几行 CSS，而是意识到：页脚沉底不是靠它自己“粘”，而是靠主内容区域主动撑开空间。一旦你开始给 <footer></footer> 加 position，就已经在对抗文档流了——多数时候，问题不在 footer，而在它前面那块没占满的空间。
