应使用Flexbox实现粘性页脚而非fixed-bottom：需设置html、body高度为100%，body添加d-flex flex-column min-vh-100，main加flex-grow-1，footer自然收缩，确保DOM结构干净无冗余wrapper。
用 fixed-bottom 会遮内容，不是“永远固定在底部”
很多人一搜就加 fixed-bottom，结果页脚真“固定”了——但它是脱离文档流的 position: fixed，滚动时盖在内容上，尤其加载动态内容（比如 ajax 或 react 渲染后）时，底下文字直接被挡住。这不是粘性页脚，是“悬浮遮罩”。
- 适用场景仅限：页脚纯装饰、无交互、不随内容高度变化（比如全站底部工具栏）
- 如果页面内容少于视口高度，页脚会悬在半空；内容多时又压住正文，
z-index解决不了宽度溢出或遮挡可点击区域的问题 - 移动端缩放或横屏时，
fixed-bottom容易错位，尤其配合input聚焦弹出软键盘时，页脚可能被顶到屏幕中间
真正“粘底”得靠 Flexbox 布局撑满整个视口
Bootstrap 4+ 默认支持 Flex，核心思路是让 body 成为 flex 容器，子元素（内容区 + 页脚）按需分配空间，页脚自动“挤”到底部，不遮不飘。
- 必须设置
html, body { height: 100% }，否则 flex 高度没基准 - 给包裹内容和页脚的外层容器加
d-flex flex-column min-vh-100 - 内容区加
flex-grow-1（等价于flex: 1 0 auto），强制占满剩余空间 - 页脚不设高度限制，自然收缩，且不会被拉伸变形
<body class="d-flex flex-column min-vh-100"> <header>...</header> <main class="flex-grow-1">内容区</main> <footer class="bg-light py-3">页脚</footer> </body>
内容少时页脚沉底，内容多时正常跟随滚动
这是粘性页脚的本质要求：不抢位置，也不掉队。Flex 方案天然满足——内容少，main 拉伸把页脚推到底；内容多，main 按实际高度渲染，页脚就在最后，滚动到底才出现。
- 避免给
main设min-height，否则小屏下会撑出多余空白 - 如果用了 Bootstrap 的
container，确保它在main内部，别套在 flex 外层，否则宽度约束会干扰 flex 行为 - 导航栏（
navbar）若为fixed-top，记得给main加pt-5类补间隙，否则首屏内容会被遮住
WordPress 或 CMS 里改模板要动对地方
很多用户在 WordPress 里引入 Bootstrap 后页脚还是乱飘，问题常出在模板结构没对齐 flex 层级——比如 wp_footer() 输出的页脚插在 </body> 前，但外面还套着主题自己的 <div id="page">，导致 flex 规则没生效。
- 检查最终 HTML 结构，确认
body直接包含 header/main/footer，中间不要嵌套无关 wrapper - 如果主题强制用
id="content"，把它改成<main class="flex-grow-1">，而不是额外包一层 div - 自定义 CSS 里慎写
footer { position: relative; top: XXpx }，这会破坏 flex 的自然流式布局
div 套着 main 或 footer，整个粘性逻辑就失效，而且很难一眼看出来。 
