吸底栏在移动端不能只用 position: fixed，因其在 iOS Safari 和部分安卓 WebView 中会因视觉视口与布局视口高度不一致而闪动或脱离底部；可靠方案是用 flex + absolute 布局配合必要 JS 修正。
吸底栏在移动端为什么不能只用 position: fixed？
因为 iOS Safari 和部分安卓 WebView 在页面滚动时，position: fixed 元素会“闪动”或脱离视口底部，尤其在地址栏收起/展开、软键盘弹出时。这不是 bug，而是浏览器为节省渲染资源做的优化——fixed 元素被锚定在「当前视觉视口」而非「布局视口」上，而两者高度不一致。
真正可靠的方案是放弃纯 CSS 的 fixed，改用 position: absolute + 布局容器控制，再配合 JS 动态修正高度（仅必要时）。
用 flex + absolute 实现稳定吸底（无 JS）
前提是整个页面结构可控，且吸底栏不需覆盖原生输入法（即不遮挡 <input>）。核心思路：让主体内容区域留出底部空间，吸底栏用 absolute 贴在容器底部，而非 viewport 底部。
关键点：
立即学习“前端免费学习笔记（深入）”；
- 外层容器设
display: flex; flex-direction: column; min-height: 100vh; - 主内容区用
flex: 1;占满剩余空间，自动撑开 - 吸底栏不参与 flex 流，用
position: absolute; bottom: 0; width: 100%;，并确保父容器position: relative;
示例结构：
<div class="page"> <main class="content">...</main> <footer class="bar">操作按钮</footer> </div>
CSS：
.page {
display: flex;
flex-direction: column;
min-height: 100vh;
position: relative;
}
.content {
flex: 1;
overflow-y: auto;
}
.bar {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 12px;
background: #fff;
border-top: 1px solid #eee;
}遇到软键盘弹出时被顶起？加 viewport 适配
iOS Safari 弹出键盘后，visualViewport.height 缩小，但 document.documentElement.clientHeight 不变，导致 absolute 吸底栏位置错乱。此时必须监听 resize 或 focusin/focusout 事件做补偿。
轻量做法（推荐）：
- 给
<input>或<textarea></textarea>添加focusin事件，动态给.page加 classkeyboard-open - CSS 中用
.page.keyboard-open .bar { transform: translateY(calc(100vh - var(--keyboard-height, 216px))); } - 键盘高度取经验值（iOS 约 216px，安卓约 250px），或用
visualViewport.height计算（注意兼容性）
注意：transform 比直接改 bottom 更稳定，避免重排。
要不要用 position: sticky？
不要。虽然 sticky 看似简洁，但它依赖滚动容器的边界，且在移动端对 bottom 支持极差——几乎所有主流浏览器都不支持 bottom: 0 的 sticky 吸底，只认 top。强行使用会导致行为不可预测，调试成本远高于 absolute 方案。
真正需要「滚动中吸底+滚动到底部消失」这类交互时，才考虑 sticky 配合 JS 判断滚动位置；纯吸底场景，它不是解法。
最易被忽略的是：吸底栏的 z-index 必须高于所有可能弹出的浮层（如 Toast、Picker），但又不能过高干扰系统级 UI（比如 iOS 的「返回手势条」）。建议固定用 z-index: 100，并在真机上反复验证软键盘、地址栏切换时的表现。
