页脚压不住底的根源在于定位上下文缺失、Bootstrap容器干扰、主体未撑满及Safari的100vh缺陷；应设包裹容器为position:relative并min-height:100dvh，页脚absolute bottom:0，主体用flex:1或margin-top:auto，避开.container内嵌。
页脚压不住底？position: absolute 用错位置了
绝对定位本身没错，但很多人把页脚塞进 body 或某个容器里，再给它加 position: absolute; bottom: 0;，结果页脚直接叠在内容上——因为父容器没设 position: relative，它就往上一直找，最后相对于 html 或视口定位，完全脱离文档流。
真正要做的，是让页脚的**直接父容器**成为定位上下文：
- 确保页脚外层有个明确的包裹容器（比如
<div class="page-wrapper">），并给它加 <code>position: relative; - 页脚自身设
position: absolute; bottom: 0; width: 100%; - 这个包裹容器必须撑满视口高度，否则页脚还是会上浮：用
min-height: 100vh;，别用height: 100vh（内容超长时会遮挡） - 页脚不放在任何
.container或.row内，而是作为body的直系子元素 - 用独立类名（如
footer-fixed）控制样式，避免被.container的max-width和padding干扰 - 如果要用 Bootstrap 的栅格类（比如
.container-fluid），务必确认它没有额外padding，或手动重置：padding-left: 0; padding-right: 0; - 给主内容区（比如
<main></main>或<div class="content">）设 <code>flex: 1;，前提是它的父容器是display: flex; flex-direction: column; - 或者用
calc()：给主体设min-height: calc(100vh - [header高度] - [footer高度]);，但注意 Bootstrap 的 header/footer 高度通常是动态的，硬写像素值易失效 - 更稳的是 Flex 布局 +
margin-top: auto：把页脚放在 flex 容器末尾，加margin-top: auto;，它会自动吸到底部，且不脱离文档流 - 改用
min-height: 100dvh;（dynamic viewport height），现代浏览器基本支持，Safari 16.4+ 已支持 - 降级方案：用 JS 动态设置高度：
document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`);，然后 CSS 里用min-height: calc(var(--vh, 1vh) * 100); - 别在页脚里用
transform: translateY()或top: calc(100vh - Xpx)这类依赖视口计算的写法，它们在 Safari 滚动时会触发重排
Bootstrap 5 默认布局不兼容？得绕开 .container 的内边距和居中逻辑
Bootstrap 的 .container 默认有 margin-left: auto; margin-right: auto; 和固定宽度，如果你把页脚放里面再绝对定位，它只会贴在容器底部，不是整个视口底部；放外面又容易被 .container 的外边距推偏。
稳妥做法是跳出 Bootstrap 的栅格容器链：
立即学习“前端免费学习笔记（深入）”；
内容少时页脚能到底，内容多时却盖住正文？缺了最小高度兜底
只靠 min-height: 100vh 不够。当页面内容高度超过视口，页脚会随内容自然下沉；但若内容很短，页脚虽到底了，主体区域却塌缩，导致页脚上方留出大片空白——这不是页脚错了，是主体没撑开。
解决方案是「主体占满剩余空间」：
移动端错位、iOS Safari 滚动卡顿？100vh 在 Safari 里不等于可视区高度
iOS Safari 的 100vh 包含地址栏高度，滚动时地址栏收起/展开会导致视口高度变化，min-height: 100vh 会跟着跳，页脚抽搐式移动。
绕过方式很简单，但容易被忽略：
最麻烦的不是写法，而是测试时只在 Chrome 里点几下就以为 OK 了——iOS 上真机滚动两下，问题全出来。
