Bootstrap 5 实现粘性页脚必须用 min-vh-100 + d-flex flex-column + flex-fill 组合，禁用 fixed-bottom（已移除）和 sticky-bottom（不适用页脚），且需确保 html/body 高度链完整，否则页脚会悬空。
因为“固定底部”根本不是页脚该有的行为——你用的其实是 position: fixed 或误用了 sticky-bottom，而真正的静态页脚必须依赖高度链和 Flexbox 主轴控制，不是靠定位“钉”出来的。
Bootstrap 5 没有 fixed-bottom 类，加了也无效
Bootstrap 5 已彻底移除 fixed-bottom。你在 class 里写 fixed-bottom，浏览器开发者工具里根本查不到对应样式——这不是你漏写了，是它不存在。别再拼凑 position-fixed bottom-0 这类组合，Bootstrap 5 的工具类系统里压根没有 bottom-0（只有 top-0、start-0、end-0），强行加只会破坏布局流。
min-vh-100 单独用不能解决“内容少时页脚上浮”
min-vh-100 只保证容器最小高度为视口高，但它不控制子元素排列方式。如果外层没启用 Flexbox，footer 仍按文档流排在 main 后面——而 main 高度不够，整个页面就“塌”了，页脚自然悬在半空。
- 必须配合
d-flex flex-column让主轴垂直 - 必须给主体内容区加
flex-fill（等价于flex: 1），它才会主动撑开剩余空间 - 页脚本身不要设
margin-top: auto：旧版 Safari 对这个有兼容问题，且语义不清
最容易被忽略的失效点：父级高度链断裂
即使结构写对了，页脚还是飘着？大概率是 html 和 body 没设高度约束：
立即学习“前端免费学习笔记（深入）”；
-
html, body { height: 100%; margin: 0; }缺一不可——否则min-vh-100在子级上会退化为min-height: auto - 外层包裹容器（比如
<div class="d-flex flex-column min-vh-100">）不能被其他样式覆盖，例如意外的 <code>height: auto或overflow: hidden - 检查
main内部是否写了死值height（如height: 400px）——这会锁住增长能力，让flex-fill失效
真正可靠的粘性页脚，从来不是靠“固定”或“吸底”这类视觉 trick 实现的；它是靠 min-vh-100 + d-flex flex-column + flex-fill 三者咬合形成的高度博弈——内容少时由 flex-fill 垫高，内容多时由文档流自然延展。任何一环松动，页脚就失重。
