position: sticky; bottom: 0 不能可靠实现页脚沉底，因 ios safari 15.4 前不支持且需父容器可滚动；推荐用 flexbox：html/body 设 height: 100%，body 设 display: flex + min-height: 100vh，main 设 flex: 1，footer 保持文档流。
position: sticky 不能直接让 <footer></footer> 常驻页面底部——它只在滚动容器内生效，且对 bottom 的支持在 iOS Safari 15.4 之前完全不可靠。真要实现“版权栏始终在内容末端”，别碰 sticky。
为什么 position: sticky; bottom: 0 在 <footer></footer> 上基本无效
常见错误是把 <footer></footer> 直接放在 里，然后加 position: sticky; bottom: 0。结果：
• iOS Safari（15.3 及更早）直接忽略 bottom，版权栏卡在顶部或文档流原位置
• 即使支持，sticky 要求父容器有明确高度 + 可滚动区域，而 默认不满足这两个条件
• 滚动时版权栏可能闪动、错位，或根本不动——这不是 bug，是规范限制
真正能落地的方案：Flexbox 布局 + min-height: 100vh
这是目前兼容性最好（Chrome 29+/Firefox 20+/Safari 9+）、语义正确、无障碍友好的解法。核心不是“定位页脚”，而是“分配空间”：
-
html和body都必须设height: 100%（仅min-height不够，Safari 旧版会失效） -
body设display: flex; flex-direction: column; min-height: 100vh - 主体内容区域（如
<main></main>）设flex: 1—— 它会吃掉所有剩余空间，把<footer></footer>“推”到最底下 -
<footer></footer>保持默认文档流位置，不设height或position，靠内边距控制留白
移动端 Safari 的 min-vh-100 坑点
Bootstrap 的 min-vh-100 类在 iOS 上有已知问题：
- 初始加载时视口高度计算偏高（尤其地址栏收起前），导致版权栏下移过多
- 滚动后视口高度重算，版权栏可能突然上跳
- 推荐改用显式
min-height: 100vh+ 手动补height: 100%更稳 - 若用 Bootstrap 5+，确保外层包裹一层
<div class="d-flex flex-column min-vh-100">，别直接套在 <code>上真正难的不是写对那几行 CSS，而是理解：版权栏“沉底”不是靠它自己找位置，而是靠主体区域主动占满剩余空间。一旦你开始给
<footer></footer>加position，就已经走偏了。
