bootstrap 5 中页脚“固定在底部”需区分场景：若要始终贴视口底边，用 position: fixed 并预留内容区 padding-bottom；若要内容少时沉底、多时随流，应采用 d-flex flex-column min-vh-100 + flex-fill 的粘性页脚方案，禁用 fixed-bottom（已移除）和 sticky-bottom（对页脚基本无效）。
Bootstrap 5 里没有“页脚固定定位”的通用解法——fixed-bottom 是真 fixed，但会遮内容；sticky-bottom 在页脚上基本无效；所谓“固定在底部”得先分清你要的是“始终贴视口底边”还是“内容少时沉底、内容多时不抢位”。选错方案，调试一小时也压不住 footer。
用 fixed-bottom 时，内容一定会被遮挡
这个类本质是 position: fixed; bottom: 0;，页脚脱离文档流，滚动时永远盖在最底下。它适合全站底部操作栏（比如音乐播放器控制条），但不适合常规版权页脚。
- 必须手动给主体内容预留空间：比如
<main class="pb-5"></main>或style="padding-bottom: 60px"，数值要略大于页脚实际高度 - 页脚不能套在
.container或.container-fluid里——否则宽度被限制，左右留白，视觉上“没固定满” - iOS Safari 软键盘弹出时，
fixed元素常被顶到屏幕中间，这不是 bug，是浏览器行为，无法靠 CSS 完全规避
想让页脚“粘”在视口底边又不遮内容？用 Flex 布局
这才是 Bootstrap 5 官方推荐的“粘性页脚”（Sticky Footer）做法，靠 d-flex flex-column min-vh-100 和 flex-fill 配合撑开空间，不是靠定位。
-
html和body必须设height: 100%，否则min-vh-100没基准 - 外层容器（通常是
）加d-flex flex-column min-vh-100 - 主体内容区（如
<main></main>）加flex-fill（或flex-grow-1），不能写height: 100%—— 后者会锁死高度，内容溢出时页脚卡住不动 - 页脚本身不加任何定位类，也不需要
mt-auto；它就在 DOM 末尾，靠 flex 自动推到底部
sticky-bottom 为什么对页脚无效
DevTools 里看到页脚的 position 是 static，不是你漏写了样式，而是 sticky 生效有硬性前提：父容器必须有可滚动高度（overflow-y: auto 或显式 max-height），且页脚得在滚动上下文内。
- 页脚几乎总是直接插在
前，父容器就是body，而body默认不可滚动（除非你手动设了overflow-y: auto） - WordPress 的
wp_footer()输出就是典型场景：没包裹、没上下文，sticky-bottom直接退化 - 别试图给
body加overflow-y: auto来强撑——这会让整页变成一个滚动区，反而破坏原生滚动体验
绝对定位（position: absolute）能用，但容易踩坑
它比 fixed 少一个“随滚动消失”的问题，但对父容器要求更苛刻：页脚的**直接父元素**必须是 position: relative，且该父容器得撑满视口高度。
- 别把页脚塞进
.container再 absolute —— 容器有max-width和margin: auto，页脚只会贴在容器底，不是视口底 - 稳妥做法是让页脚作为
body的直系子元素，并确保body有position: relative; min-height: 100dvh;（100dvh比100vh更稳，避开 Safari 地址栏高度抖动） - 如果用了
fixed-top导航栏，页脚的bottom值还得减去导航高度，否则在小屏下可能重叠
真正难的不是写哪行 class，而是判断当前页脚该归哪一类：是纯装饰悬浮层，还是内容流的一部分。混用方案会导致布局错乱，而且这种错乱在不同设备、不同内容长度下表现不一致，查起来特别费时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
