bootstrap不自带粘性页脚，需用d-flex+min-vh-100+flex-fill实现：body设d-flex flex-column min-vh-100，main设flex-fill撑满剩余空间，footer保持默认块级即可自然沉底。
Bootstrap 本身不自带“粘性页脚”行为，footer 默认就是普通流式元素；所谓“粘底”，本质是靠 CSS 高度控制 + Flexbox 布局实现的，不是加个 sticky-top 或 position: sticky 就能搞定。
为什么直接用 position: sticky 对 footer 无效
因为 position: sticky 要求元素在滚动流中“有空间可粘”——它必须被包裹在有高度限制的父容器里，且自身不能处于文档末尾无后续内容的位置。而 footer 天然在 HTML 最底部，浏览器没东西可让它“粘住”。强行加 position: sticky; bottom: 0 不仅无效，还可能破坏文档流、遮挡内容。
-
sticky-top类只适用于顶部固定，不支持底部 - 给
footer单独设position: sticky; bottom: 0，在绝大多数浏览器中完全不触发 - 如果父容器没设
height或max-height，sticky根本没有锚点参考
Bootstrap 5 推荐做法：用 d-flex + min-vh-100 + flex-fill
这是目前最稳定、兼容性最好、且符合 Bootstrap 5 工具类设计意图的方式。关键不在“加什么类”，而在整个高度链是否打通。
- 必须给
和清除默认 margin，并确保高度传递：不需要手动写 CSS，但要避免第三方样式重置掉min-vh-100的效果 -
是起点，不是可选项 -
<main class="flex-fill"></main>才是撑开剩余空间的核心；别用height: 100%或flex: 1手写，那会和工具类冲突 -
<footer></footer>不需要任何高度或定位类，加mt-auto只为留白，不是为了“推到底部”——Flex 布局下它天然靠底
内容动态加载后页脚塌陷怎么办
AJAX 渲染页脚、i18n 切换、图片懒加载完成，都可能导致 main 区域高度重算延迟，表现为页脚上浮或留白异常。这不是 Flex 布局失效，而是浏览器未及时响应 DOM 变化。
- 手动触发重排：操作完页脚或主内容后执行
document.body.offsetHeight（读取一个布局属性即可） - 避免对
footer使用display: none切换，改用visibility: hidden+opacity: 0，保持其占位尺寸 - 如果页脚含异步加载的字体或图标，监听
fontload或img.onload后再确认main.flex-fill是否仍有效
容易被忽略的破坏点：嵌套容器与固定高度
很多项目在 <main></main> 里再套一层 <div class="container">，然后给它加 <code>height: 100% 或 min-height: 100% ——这直接切断了 Flex 填充链。子容器一旦设了固定高度，flex-fill 就失去作用。
-
.container默认是min-height: auto，不会继承父级 flex-grow - 不要给
main的子元素设height: 100vh或height: 100%，那会让它拒绝随内容扩展 - 检查是否有全局样式（比如某些 UI 库）给
body加了height: auto !important，这会覆盖min-vh-100
真正难的不是写对那几行 class，而是排查哪一层悄悄截断了高度传递——尤其是第三方组件、iframe、或 SSR 渲染后 JS 补全内容的场景。Flex 布局很稳，但它只忠于你给它的那个 DOM 结构和 CSS 环境。
