Bootstrap 5 中 sticky-footer 默认不生效是因为移除了对 .sticky-bottom 的页脚支撑，需用 Flexbox 布局实现：body 设 d-flex flex-column min-vh-100，main 设 flex-fill，footer 保持普通块级元素。
sticky-footer 在 Bootstrap 5 中为什么默认不生效
bootstrap 5 移除了 .sticky-bottom 对页脚的支撑能力，它只让元素“粘在视口底部”，不是“粘在页面内容之后”。真要实现经典 sticky footer（内容不足时页脚沉底，内容超长时页脚被顶下去），得靠 flexbox 布局控制整个页面结构，而不是靠某个 class。
常见错误现象：footer 悬浮在内容中间、被截断、或始终贴着视口底边滚动——这说明你误用了 .sticky-bottom 或没约束父容器高度。
- 必须确保
html和body高度为100%，否则 flex 布局无基准 -
<main>或内容区需设flex: 1，才能撑开剩余空间 - 页脚不能设
position: fixed或absolute，会脱离文档流
用 Bootstrap 5 的 utility classes 快速写 sticky footer
不用自定义 CSS，纯用 Bootstrap 内置类就能搞定。关键是把 <body> 变成 flex 容器，并让内容区“自动填满”。
使用场景：新建项目、快速原型、不想引入额外样式文件。
<body class="d-flex flex-column min-vh-100"> <header>...</header> <main class="flex-fill">...</main> <footer>...</footer> </body>
-
min-vh-100确保 body 至少占满视口高度 -
flex-column让子元素垂直堆叠 -
flex-fill等价于flex: 1，让<main>吃掉所有剩余空间 - 页脚保持普通块级元素即可，无需额外 class
Bootstrap 4 用户要注意的兼容性差异
Bootstrap 4 的 min-vh-100 在某些旧版 iOS Safari 上失效，且 flex-fill 类名存在但语义不如 v5 明确。更稳妥的做法是降级使用 flex-grow-1，并补全 height 声明。
性能影响：无。只是 CSS 类组合，不触发重排或 JS。
- v4 中优先用
flex-grow-1替代flex-fill - 若遇到 iOS 11 下页脚上浮，给
body加style="height: 100vh;"强制兜底 - v4 的
h-100不等价于min-vh-100，前者依赖父级高度，容易链式失效
当页脚内容动态加载时布局错乱怎么办
比如用 AJAX 渲染页脚版权信息、多语言切换后重绘页脚，可能触发 flex 高度重算失败，表现为页脚塌陷或留白异常。
根本原因：浏览器未感知到内容变化导致的 flex 容器尺寸更新延迟。
- 手动触发重排：修改页脚后执行
footer.offsetHeight（读取布局属性） - 避免在页脚内用
display: none切换，改用visibility: hidden保持占位 - 如果页脚含图片或字体加载，监听
load事件后再确认main是否仍占满
flex-fill 的兄弟节点有没有真正撑开——这点最容易被忽略，一上来就调页脚 margin 或 position，反而绕远了。 
