应先明确目标：内容少时沉底、内容多时自然落底（粘性页脚）还是永远钉在视口底部（fixed定位）；bootstrap 5 官方推荐用d-flex flex-column min-vh-100配合flex-fill实现粘性页脚，需html和body设height:100%，外层容器加d-flex flex-column min-vh-100，main加flex-fill，页脚不加定位类。
页脚沉底还是钉底？先分清你要哪种“固定”
Bootstrap 页脚没贴到底，不是 class 没加对，而是你没想清楚目标：是要内容少时沉在视口底部、内容多时自然落到底部（粘性页脚），还是不管页面长短、永远钉在屏幕最底下（fixed 定位）？混用方案必然失效。
用 d-flex flex-column min-vh-100 实现粘性页脚
这是 Bootstrap 5 官方推荐、兼容性最好、无需 JS 的方案。它靠 Flex 布局把页脚“推”下去，不依赖滚动或定位上下文。
-
html和body必须设height: 100%，否则min-vh-100失效 - 外层容器（通常是
）加d-flex flex-column min-vh-100 - 主体内容区（如
<main></main>）必须加flex-fill，不能写height: 100%——后者会锁死高度，内容溢出时页脚卡住 - 页脚本身不加
mt-auto或任何定位类，flex-fill已确保它被推到最后
结构示例：
<header></header><main class="flex-fill">内容区域</main><footer class="bg-light py-3">版权信息</footer>
position: absolute 用错父容器就白搭
很多人写 footer { position: absolute; bottom: 0; }，结果页脚飘在中间或盖住内容——问题不在 footer，而在它的直接父容器没设 position: relative，导致它相对于 html 或视口定位。
- 必须给页脚的**直接父元素**加
position: relative - 该父容器需撑满高度：
min-height: 100vh（别用height: 100vh，内容超长时会遮挡） - 页脚自身加
position: absolute; bottom: 0; width: 100% - 如果页脚放在
.container内，会被其max-width和margin: auto截断；应放为body直系子元素，或用.container-fluid+ 手动清内边距
sticky-bottom 在页脚上基本无效
sticky-bottom 是为导航栏这类“滚动中保持可见”的组件设计的，不是给页脚用的。页脚通常位于文档流末端，父容器又没有可滚动高度，position: sticky 直接退化成 static ——你在 DevTools 里看到 computed position 是 static 就是这个原因。
- 它要求父容器有
overflow-y: auto或显式max-height，而页脚几乎总是直接插在前 - WordPress 等 CMS 的
wp_footer()输出就是典型场景：没上下文，sticky失效 - 强行包裹一层带
max-height的容器，页脚会在该容器滚动到底时“吸住”，不是整个页面底部
真正难的不是写哪行 CSS，而是判断页脚是否需要随内容滚动、是否要避开软键盘、是否被 .container 的 padding 挤偏——这些细节一漏，整套布局就失灵。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
