bootstrap默认页脚不粘底是因为html和body未设height:100%，导致min-vh-100或min-height:100vh失效；需确保高度链完整，并用d-flex flex-column+flex-fill实现粘性布局。
为什么Bootstrap默认页脚不粘底
Bootstrap 5 的 .container 和 .row 本身不提供高度约束，页脚会随内容浮动——内容少时页脚上浮，内容多时正常流式布局。这不是 Bug，是 Flexbox 或 Grid 布局未显式启用导致的自然行为。关键不在 Bootstrap 版本，而在你是否接管了 html 和 body 的高度链。
用 flexbox 实现粘性页脚的最小必要改动
必须从根元素开始设置高度传递，否则 min-height: 100vh 在子元素上无效。只给 .wrapper 加 display: flex; flex-direction: column 不够，父级没高度，子级的 flex: 1 就没参照。
html, body { height: 100%; margin: 0; }- 外层包裹容器（如
<div class="d-flex flex-column min-vh-100">）必须存在，且不能被其他样式中断（比如意外的 <code>height: auto） - 主体内容区需设
flex: 1（即flex-grow: 1），让其撑满剩余空间；页脚保持默认flex: 0 0 auto
示例结构：
<div class="d-flex flex-column min-vh-100">
<header>...</header><main class="flex-fill">内容区域</main><footer>底部固定</footer>
</div>
.flex-fill 是 Bootstrap 5 提供的 flex: 1 1 auto 别名，比手写 style="flex: 1" 更可靠。
常见失效原因：padding/margin 和 border-box 陷阱
即使结构正确，页脚仍可能上浮，大概率是以下两个隐性问题：
-
body或html被第三方 CSS 注入了margin（如某些重置库），导致min-vh-100计算值溢出视口 - 页脚或主体设置了
padding-bottom/margin-top，而父容器未设box-sizing: border-box，造成高度计算偏差 - 使用了
.container-fluid但外层没清除max-width限制，导致 flex 容器宽度收缩，间接影响高度渲染（少见但存在）
调试建议：在浏览器 DevTools 中检查 html → body → .d-flex 链路的高度是否逐级为 100%，并确认 computed height 是否等于 viewport 高度。
兼容旧版 Bootstrap 4 的写法差异
Bootstrap 4 没有 min-vh-100 工具类，需手动补全：
<div class="d-flex flex-column" style="min-height: 100vh"> <header>...</header><main class="flex-grow-1">...</main><footer>...</footer> </div>
.flex-grow-1 在 BS4 中等价于 BS5 的 .flex-fill；但 BS4 默认未设 html, body { height: 100% }，这步必须显式加在自定义 CSS 中，否则 min-height: 100vh 在 flex 容器上无效。
真正卡住人的往往不是 flex 属性本身，而是高度链断裂——漏掉 html 或 body 的 height: 100%，或者某个中间容器被 position: absolute 或 transform 拉出了文档流。动手前先用 DevTools 逐层 hover 看 computed height。
