position: sticky 替代 fixed 是最稳解法，需父容器 min-height: 100vh、无 transform/overflow:hidden/fixed、子元素 sticky bottom: 0；env(keyboard-inset-bottom) 仅限 iOS 16.4+ Safari；padding-bottom 兜底兼容性最好。
直接用 position: sticky 替代 position: fixed 是目前最稳、副作用最少的解法，iOS 15.4+ 和 Android Chrome 90+ 均支持，无需 JS 就能天然响应键盘弹出。
为什么 position: fixed 在键盘弹出时一定失效
它锚定的是初始 visualViewport.height，而软键盘会压缩这个值；但浏览器不会重算 fixed 元素的位置。结果就是按钮“飘”在键盘上方，或被顶出可视区域。加 z-index、调 bottom、套 100vh 都无效——这些值不随键盘动态更新。
用 position: sticky; bottom: 0 的硬性前提
这不是换个属性就能跑通，必须满足三件事：
- 父容器（如
#app或main）设min-height: 100vh，不能只写height: 100%，否则键盘弹出时容器塌陷 - 父容器不能有
transform、overflow: hidden或position: fixed父级，否则sticky失效且无报错 - 底部元素本身写
position: sticky; bottom: 0;，不加width: 100%会导致横屏或缩放后偏移
env(keyboard-inset-bottom) 只适用于 iOS 16.4+，且必须配 @supports
这是纯 CSS 最干净的原生避让方案，但仅限 Safari —— 安卓完全不识别该变量：
立即学习“前端免费学习笔记（深入）”；
- 必须在
<meta>中声明viewport-fit=cover，否则env()恒为0px - 写法必须是
bottom: env(keyboard-inset-bottom, 0px)，漏掉 fallback 会导致键盘收起后按钮悬空 - 必须用
@supports (bottom: env(keyboard-inset-bottom))包裹整条规则，否则旧版 Safari 会忽略甚至解析失败 - 别和
svh混用，比如bottom: calc(0px + 100svh)是语义错误，svh是高度单位，env(keyboard-inset-bottom)是偏移量
兜底方案：给内容容器加 padding-bottom，不是给 body 加 margin-bottom
这是兼容性最广、最不容易翻车的方式，适用于所有安卓 WebView 和老 iOS：
- 把
padding-bottom设在最外层内容容器上（如#app），不是body—— 后者易触发外边距合并 - 值要匹配按钮实际高度（含
border和padding，不含margin），例如按钮高60px就写padding-bottom: 60px - 务必声明
box-sizing: border-box，否则padding会让容器额外变高 - 若需叠加安全区（如 iPhone 底部 Home Indicator），再补一行
padding-bottom: env(safe-area-inset-bottom)，并确保viewport-fit=cover存在
最容易被忽略的是：所有方案都依赖容器结构稳定。如果页面用了 transform、fixed 父级或动态 height 计算，getBoundingClientRect() 和 scrollIntoView() 都可能静默失效——不是代码错了，是布局上下文被破坏了。
