Bootstrap 4 中 position: fixed 使 footer 遮盖内容，因容器未预留底部空间；推荐用 Flexbox 实现粘性底部：body 设 d-flex flex-column min-vh-100，main 用 flex-fill，footer 用 mt-auto。
为什么 position: fixed 在 Bootstrap 4 里会让 footer 遮住内容
直接给 加 position: fixed; bottom: 0; 看似简单，但 Bootstrap 4 的 .container 和 .row 默认不预留底部空间，导致 footer 盖在主内容末尾上。这不是 CSS 写错了，是文档流被忽略了。
关键不是“怎么固定”，而是“怎么让主体内容不被盖住”。Bootstrap 4 没有内置的 sticky-footer 类（那是 v5+ 才加的），得自己补这个空档。
- 必须给
或设置padding-bottom，值 ≥ footer 高度 - footer 自身要设
height或min-height，否则padding-bottom难估算 - 避免用
vh单位算高度——移动端键盘弹出、地址栏缩放都会导致计算失准
用 Flexbox 实现真·粘性底部（推荐）
Bootstrap 4 基于 Flexbox 构建，直接利用其容器能力比硬写 fixed 更可靠。核心是把 变成 flex 容器，方向为 column，再让主内容区域 flex: 1 占满剩余空间。
示例结构：
<header>...</header><main class="flex-fill">...</main><footer class="mt-auto">...</footer>
-
min-vh-100确保 body 至少占满视口，避免短内容时 footer 上浮 -
flex-fill是 Bootstrap 4 提供的flex: 1 1 auto工具类，等价于撑开中间区域 -
mt-auto让 footer 自动推到最底，不依赖固定高度，响应式友好 - 如果 footer 有背景色或边框，记得加
width: 100%—— flex 子项默认不占满父容器宽度
当必须用 position: fixed 时的兜底方案
比如需要 footer 始终覆盖在滚动内容之上（如带半透明遮罩的版权条），那只能用 fixed。这时必须手动管理留白和 z-index。
- 给
或最后一个加margin-bottom: 60px（假设 footer 高 60px） - footer 必须声明
width: 100%和left: 0，否则可能只占内容宽度 - 加
z-index: 1030（参考 Bootstrap 4 的 modal-zindex），避免被其他组件遮挡 - 移动端要注意：iOS Safari 中 fixed 元素在键盘弹出时可能错位，需监听
resize事件重设bottom
常见失效场景与调试线索
footer 没卡住？先查这三处：
- body 或 html 是否有
height: 100%—— Bootstrap 4 不要求这个，加了反而干扰 flex 布局 - 是否误用了
.container-fluid包裹 footer 却没清除父级padding，导致左右留白或错位 - 检查控制台是否有
Uncaught TypeError: Cannot read property 'offsetHeight' of null—— 这通常是 JS 插件（如某些轮播图）强行操作了 footer 的 DOM，破坏了 flex 结构
最易忽略的是：Bootstrap 4 的 .navbar-fixed-bottom 已被移除，别在文档里搜这个类名——它只存在于 v3。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
