正确做法是给最外层内容容器设 padding-bottom（值等于底部栏高度）并配 box-sizing: border-box；iphone 需叠加 env(safe-area-inset-bottom)；动态场景用 css 变量+resize 监听；优先考虑 flex 布局替代 fixed。
给主内容容器加 padding-bottom，别碰 margin-bottom
fixed 底部栏（如导航、工具栏）盖住“联系我们”按钮或页脚链接，本质是内容没给它留位置。加 margin-bottom 看似直观，但会和外边距合并、干扰 scrollHeight 计算，甚至让 IntersectionObserver 误判是否触底。
正确做法是作用于最外层内容容器（比如 <main></main>、#app 或包裹全部业务内容的 div），设 padding-bottom，值严格等于底部栏高度：
.app {
padding-bottom: 60px;
box-sizing: border-box;
}
- 必须配
box-sizing: border-box，否则 padding 会让容器总高超出预期 - 别直接改
body—— 第三方库、全局样式或横向滚动条可能引发空白区或布局抖动 - 高度含内边距和 border，不含 margin；用 Chrome DevTools 的 Computed 面板确认实际高度
适配 iPhone 安全区：用 env(safe-area-inset-bottom) 补齐
iPhone X 及之后机型有物理手势条，只写 padding-bottom: 60px 仍会被截断。系统提供 env(safe-area-inset-bottom) 动态返回安全距离（通常 34px），但前提是 <meta> 必须带 viewport-fit=cover：
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
然后在 CSS 中叠加使用：
.app {
padding-bottom: 60px;
padding-bottom: calc(60px + env(safe-area-inset-bottom));
}
- 写两遍是为兼容旧版 Safari（
env()不支持 calc 时取第一行；支持时覆盖） - 不能把
env()用在top、bottom等定位属性上，只对padding和margin有效 - 如果底部栏本身也用了
env(safe-area-inset-bottom)做内边距，记得在calc()中去重，避免双倍留白
高度动态变化时，用 CSS 变量 + JS 同步更新
键盘弹出、地址栏收起/展开、横竖屏切换都会导致 window.innerHeight 变化，而 fixed 元素不会重定位。硬编码 60px 就会错位。
推荐组合方案：CSS 变量管理高度 + JS 监听 resize 动态修正：
:root {
--nav-height: 60px;
}
.app {
padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom));
}
JS 部分：
function updateNavHeight() {
const height = window.innerHeight - document.documentElement.clientHeight;
document.documentElement.style.setProperty('--nav-height', Math.max(0, height) + 'px');
}
window.addEventListener('resize', updateNavHeight);
updateNavHeight(); // 初始化
- 这个差值能较准确反映当前被压缩的视口高度（即键盘或地址栏占位）
- 注意加
Math.max(0, height)防止负值；某些安卓 WebView 可能返回异常值 - 不要只监听
focusin/blur—— 键盘收起后 resize 可能延迟触发，需兜底
真麻烦的是状态跳变，不是写法本身
真正棘手的从来不是“怎么写 CSS”，而是 iOS 地址栏收起/展开、键盘唤起/收起、横竖屏切换这几种状态之间，视口高度反复跳变。哪怕你写了 env()、变量、监听，也可能在某个瞬间出现 1–2px 偏移。
这时候要接受一个事实：固定定位在移动端就是不稳定的。如果业务允许，优先考虑用 flex 布局替代 fixed —— 把底部栏作为兄弟节点，靠 min-height: 100dvh + flex: 1 + margin-top: auto 推到底部，它完全不依赖视口锚点，键盘弹出时位置纹丝不动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
