最干净方案是用 env(keyboard-inset-bottom) 动态上浮 fixed 按钮（iOS 16.4+），需 @supports 降级；安卓不支持，须 fallback 至 padding-bottom 预留或 position: sticky；JS 检测焦点与视口变化为必要兜底。
移动端 position: fixed 元素（尤其是底部按钮）被软键盘遮挡，不是“没加 z-index”或“高度写错了”，而是浏览器在键盘弹出时对视口和 fixed 定位的解释不一致——iOS 会压缩 visualViewport，但 fixed 仍按原始 window.innerHeight 定位；安卓 WebView 更是行为碎片化。直接靠 bottom: 0 + z-index 无法解决。
用 env(keyboard-inset-bottom) 动态上浮 fixed 按钮（iOS 16.4+）
这是目前最干净的 CSS 方案，无需 JS，但仅限 iOS Safari 16.4 及以上：
-
bottom: env(keyboard-inset-bottom, 0px)会让按钮自动“贴着键盘顶部”，键盘收起时回退到0px - 必须搭配
@supports (bottom: env(keyboard-inset-bottom))做降级，否则旧版 Safari 会忽略整条规则甚至解析失败 - 不要和
svh混用：比如bottom: calc(0px + 100svh)是错的——svh是高度单位，env(keyboard-inset-bottom)是偏移量，语义不同，相加无意义 - 安卓完全不支持该变量，必须 fallback 到 JS 或结构优化方案
给 body 或容器加 padding-bottom 预留空间
这是兼容性最广、最稳的兜底方式，适用于所有浏览器，包括老安卓 WebView：
- 如果底部 fixed 元素高 60px，就在最外层内容容器（如
#app）上设padding-bottom: 60px，并确保box-sizing: border-box - 避免作用于
body直接加margin-bottom——它不阻止遮挡，还可能触发外边距合并或滚动异常 - 响应式场景可用
calc()，例如padding-bottom: calc(100vh - 100% + 60px)，但逻辑绕且部分安卓不认，推荐优先用 CSS 变量 + 媒体查询 - 若页面有 JS 动态控制键盘状态（如监听
focusin），记得同步更新这个padding-bottom值，否则键盘弹出后内容仍会被顶穿
用 position: sticky 替代 fixed（推荐首选）
如果你的按钮本就紧贴内容流底部（如聊天输入框、评论区表单），sticky 是更自然、更少副作用的选择：
立即学习“前端免费学习笔记（深入）”；
- 设
position: sticky; bottom: 0;，父容器需有明确高度（如min-height: 100vh）且允许内部滚动 - 它不脱离文档流，不会被键盘“悬空”顶起，也不受
transform等属性引发的层叠上下文干扰 - 兼容性已足够好：iOS 15.4+、Android Chrome 90+ 均支持；旧版可渐进增强为
absolute+bottom: 0 - 注意别在父容器上加
overflow: hidden或transform，否则 sticky 会失效
JS 动态切换定位 + 高度检测（安卓 & 老 iOS 必须）
纯 CSS 无法覆盖全部机型，尤其安卓 WebView 和 iOS 15.x，必须靠 JS 补位：
- 不要监听
resize—— 键盘弹出时 iOS 不一定触发，安卓行为不一致；改用focusin/blur+window.innerHeight差值判断 - 聚焦时用
setTimeout(() => { ... }, 0)确保 DOM 更新完成，再读input.getBoundingClientRect().bottom计算当前可视区域底部位置 - 将按钮临时改为
position: absolute，bottom设为window.innerHeight - inputRect.bottom，失焦后恢复fixed - 多个输入框共用同一底部栏时，必须统一管理焦点状态，避免重复切换导致样式抖动
真正难的不是写哪一行 CSS，而是判断当前环境是否支持 env(keyboard-inset-bottom)、是否需要 JS 回退、以及 padding-bottom 的值是否随键盘高度动态变化——这些边界条件不处理，哪怕用了 lvh 或 sticky，照样在某台测试机上被顶穿。
