应使用Flexbox实现粘性页脚：设置html、body高度为100%，body加d-flex flex-column min-vh-100，main加flex-fill（或flex-grow-1），footer保持文档流自然收缩，避免fixed-bottom遮挡内容。
“永远在页面底部”这个说法本身有歧义——你要的是内容少时沉底、内容多时自然落底的粘性页脚，还是不管滚动与否、始终钉在视口最下方的 fixed 页脚？两者实现完全不同，混用会直接导致遮挡、悬空或失效。
用 d-flex flex-column min-vh-100 实现真正的粘性页脚
这是 Bootstrap 5 官方推荐、兼容性最好、且不遮内容的方式。它靠 Flex 布局把页脚“推”到底部，不是靠定位“压”上去。
-
html和body必须设height: 100%（Bootstrap 5 中可通过h-100或自定义 CSS），否则min-vh-100没基准 - 外层容器（通常是
<body>）加d-flex flex-column min-vh-100 - 主体内容区（如
<main>）必须加flex-fill（等价于flex: 1），不能写height: 100%或min-height—— 后者会锁死高度，内容溢出时页脚卡住 -
<footer>不加任何定位类、不加mt-auto、不设固定高度，让它自然收缩即可
为什么 sticky-bottom 对页脚基本无效
因为 sticky-bottom 是为导航栏这类“滚动中保持可见”的组件设计的，它依赖父容器有可滚动高度且元素未脱离文档流末端。而页脚天然在 HTML 最底部，没有“上方空间可粘”，浏览器直接回退成 position: static。
- DevTools 里看到
position: static就是这个原因 - WordPress 等 CMS 的
wp_footer()输出常直接插在</body>前，没包裹容器，sticky完全没锚点 - 即使强行加
position: sticky; bottom: 0，短内容页面下它仍会堆在内容末尾，不是“钉在视口底边”
用 fixed-bottom 实现真·视口固定（慎用）
如果你明确要页脚永远贴底、不随滚动移动（比如底部操作栏），就必须用 position: fixed，但代价是你得手动兜底所有布局干扰。
- 给页脚加
fixed-bottom类（等价于position: fixed; bottom: 0; left: 0; right: 0;），并显式设z-index: 1030（高于 Bootstrap 默认模态框） - 主要内容容器（如
<main>）必须预留底部空间：pb-5或padding-bottom: 60px（按实际页脚高度微调） - 页脚不能放在
.container内——它的max-width和margin: auto会让固定效果只作用于容器宽度内 - iOS Safari 软键盘弹出时，
fixed元素常被顶到屏幕中间，需额外用@media (pointer: coarse)或 JS 监听resize做降级处理
最容易被忽略的点：动态内容（AJAX 加载、图片懒加载、i18n 切换）会导致 main 高度重算延迟，表现为页脚短暂上浮。这不是 Flex 失效，而是浏览器未及时响应 DOM 变化——此时应监听 resize 或使用 ResizeObserver 主动触发重排。
