footer不粘底的主因是父容器缺失高度约束或Flex容器未设min-height:100vh；Bootstrap5推荐用d-flex+min-vh-100+flex-grow-1实现，禁用position:sticky因其兼容性差且行为不可控。
为什么 footer 死活不粘底？常见错误现象
页面内容少时，footer 悬在中间、随内容浮动，不是贴着视口底部；加了 position: fixed 又遮挡内容或滚动异常；用 margin-top: auto 在 flex 布局里没反应——大概率是父容器没设高度约束，或者 flex 容器没启用 min-height: 100vh。
Bootstrap 5 的标准做法：用 flex-column + min-vh-100
Bootstrap 5 内置类已覆盖粘性页脚核心逻辑，不需要手写 CSS。关键是把整个页面结构变成一个垂直 Flex 容器，并确保它至少占满视口高度：
-
<body>或外层<div class="d-flex flex-column min-vh-100">必须存在，且不能被其他样式（如height: 100%）覆盖 -
<main class="flex-grow-1">包裹主体内容，它会自动撑开剩余空间 -
<footer>放在最后，无需额外定位类
示例结构：
<body class="d-flex flex-column min-vh-100"> <header>...</header> <main class="flex-grow-1">内容区域</main> <footer>版权信息</footer> </body>
为什么不用 position: sticky？兼容性和行为陷阱
position: sticky 对 footer 几乎无效：它只在滚动范围内“粘”，而页脚本该始终在底部，不是滚动中才出现。更关键的是，它的触发依赖父容器有明确高度和滚动上下文，实际项目中极易因嵌套、overflow 或父级 height 计算失效。
- Chrome/Firefox 表现不一致，尤其在移动端 WebView 中常完全不生效
- 如果页面内容超长，
sticky页脚会在滚动到末尾前就“吸顶”，反而破坏预期 - Bootstrap 官方文档明确不推荐用
sticky实现粘性页脚
旧版 Bootstrap 4 需要手动补 html, body { height: 100% }
Bootstrap 4 缺少 min-vh-100 类（它是 5+ 引入的），必须靠 CSS 补齐高度链：
- 确保
html和body都设height: 100%，否则min-height: 100%在子元素上无效 - 外层容器用
class="d-flex flex-column h-100"，<main>仍用flex-grow-1 - 注意：Sass 版本中若启用了
$enable-negative-margins: true，可能干扰mt-auto行为，建议优先用flex-grow-1
真正卡住人的地方，往往不是 Flex 写法本身，而是某个祖先元素悄悄加了 overflow: hidden 或重写了 height，导致高度链断裂。检查时从 html 开始逐层看 computed height 最直接。
