移动端CSS中如何正确处理fixed定位导致的键盘遮挡问题？-css教程-PHP中文网

position: sticky 是替代 fixed 的首选方案，需父容器 min-height: 100vh 且无 transform/overflow:hidden/fixed 父级，底部元素设 sticky + bottom: 0 + width: 100%。

移动端css中如何正确处理fixed定位导致的键盘遮挡问题？

别硬刚 position: fixed —— 它在软键盘弹出时必然错位，这不是你写错了，是浏览器行为本身就不支持动态锚定。 所有纯 CSS 的 bottom: 0、100vh、z-index 都无法修复，必须换锚点或绕开视口依赖。

这是目前副作用最小、零 JS、兼容性足够落地的方案，iOS 15.4+ 和 Android Chrome 90+ 均支持。

父容器（如 #app 或 main）必须设 min-height: 100vh，不能只写 height: 100vh，否则键盘弹出时容器塌陷
父容器不能有 transform、overflow: hidden 或 position: fixed 父级，否则 sticky 会静默失效（无报错）
底部元素直接写 position: sticky; bottom: 0;，并加 width: 100% 防横屏偏移
不要和 env(keyboard-inset-bottom) 混用——sticky 本身已响应键盘高度变化，叠加反而可能冲突

当需支持 iOS 15.3 或老安卓 WebView 时，这是唯一可靠路径。但只改 position 属性必穿帮，必须同步约束容器和计算逻辑。

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

根容器（如 body 或 #app）设 position: relative; min-height: 100vh;
底部元素初始为 position: fixed; bottom: 0;，focusin 触发后立刻切为 position: absolute; bottom: 0;
focusin 回调里必须加 setTimeout(() => { ... }, 0)，否则 getBoundingClientRect() 读的是键盘弹出前的旧坐标
计算 bottom 值用 window.innerHeight - inputRect.bottom，不是写死数值；blur 后立刻恢复 fixed 并清除 top/bottom 行内样式
务必检查 document.activeElement === inputEl，防止异步焦点转移导致状态错乱

这是最干净的纯 CSS 方案，但仅对 iOS 有效，安卓完全不识别，且必须严格满足前提条件才能生效。

<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) 是偏移量

这是兼容性最广、最不容易翻车的方式，适用于所有安卓 WebView 和老 iOS，但必须作用在正确层级。

把 padding-bottom 加在最外层内容容器（如 #app），不是 body —— 后者易触发外边距合并
值要匹配底部按钮实际高度（含 border 和 padding，不含 margin），例如按钮高 60px 就写 padding-bottom: 60px
必须声明 box-sizing: border-box，否则 padding 会让容器额外变高
若需兼容 iPhone 底部安全区，再补一行 padding-bottom: env(safe-area-inset-bottom)，同样需 viewport-fit=cover