position: fixed 会让 Footer 遮住内容，因其脱离文档流、不占空间，需手动为内容区添加 padding-bottom 补偿；而 Flexbox 方案（min-vh-100 + flex-column + mt-auto）让 Footer 自动沉底、不遮挡且响应式自适应。
为什么 position: fixed 在 Bootstrap 5 里会让 Footer 遮住内容？
直接加 position: fixed; bottom: 0; 确实能让 Footer 始终贴底，但 Bootstrap 5 的 .container、.row 和默认的 padding-bottom 没有为固定定位留出空间，结果就是 Footer 盖在页面末尾内容上——尤其在短页面时最明显。
根本原因不是 Bootstrap 限制你用 fixed，而是它没帮你做「占位补偿」。你需要手动告诉浏览器：「这里该空出 Footer 的高度」。
- 给
<body>或主内容容器加padding-bottom，值等于 Footer 高度（比如60px） - Footer 本身设
position: fixed; bottom: 0; width: 100%; - 确保
z-index足够高（如1030），避免被其他组件（如 navbar）遮挡
用 Flexbox 实现真正「撑满视口」的响应式 Footer（推荐）
比起 fixed，Flexbox 更稳妥：它让页面至少占满整个视口高度，Footer 自动「沉」到底部，不遮内容，也不依赖硬编码高度。Bootstrap 5 默认支持 flex-column 和 min-vh-100，正好用来搭骨架。
- 给外层包裹元素（如
<div class="d-flex flex-column min-vh-100">）加min-vh-100和d-flex flex-column - 主内容区用
<main class="flex-grow-1">—— 这个类会自动撑开剩余空间 - Footer 用
<footer class="mt-auto">，mt-auto让它紧贴父容器底部 - 移除所有
position: fixed和手动padding-bottom，响应式更干净
示例结构：
立即学习“前端免费学习笔记（深入）”；
<div class="d-flex flex-column min-vh-100"> <header>...</header> <main class="flex-grow-1">...</main> <footer class="mt-auto">© 2024</footer> </div>
移动端适配：Footer 高度变化时怎么不崩？
如果 Footer 内容随屏幕变窄而换行（比如多列链接变成单列），高度会动态增加，fixed 方案里硬写的 padding-bottom 就失效了；Flexbox 方案则天然适应——因为它是靠布局流计算的，不是靠像素值卡死。
- 避免在 Footer 中用
height: 100px这类固定高，改用min-height或让内容决定高度 - 用
text-wrap: wrap或 Bootstrap 的flex-wrap类控制子项换行 - 如果必须用
fixed，就用 JS 监听resize并重算 Footer 高度再更新padding-bottom，但没必要——Flexbox 更轻量
和 Bootstrap 5 的 .sticky-top / .sticky-bottom 有什么区别？
.sticky-bottom 是「粘性定位」，不是固定定位：它只在滚动到视口底部时才吸附，平时仍随文档流；而你要的是「始终在视口最底下」，所以它不满足需求。另外，.sticky-bottom 在 Safari 旧版本兼容性较差，且对父容器有 transform 或 overflow 限制。
-
.sticky-bottom适合「滚动到底部才出现」的辅助操作栏 -
position: fixed+ 补偿 padding 适合需要绝对固定的版权条 - Flexbox +
mt-auto是兼顾语义、可访问性和响应式的首选
真正难的不是写哪行 CSS，而是想清楚：你要的「固定」是指「视觉上不动」，还是「逻辑上始终在页面最末端」——后者才是多数 Footer 的真实需求。
