flex布局+vh无法解决键盘顶起问题，因vh不随键盘弹出动态更新；env(safe-area-inset-bottom)是目前最轻量可靠的方案，需viewport配置正确并配合css使用；安卓webview需js监听focusin+高度差兜底；position:sticky+容器滚动更稳定。
用 flex 布局 + vh 单位无法解决键盘顶起问题
直接写 height: 100vh 或用 display: flex; flex-direction: column; 把底部元素塞进 margin-top: auto 容器里，**在软键盘弹出时大概率失效**。因为 vh 是基于初始视口高度计算的，而键盘弹出会触发 window.innerHeight 缩水，但 CSS 不会重算 vh 值（尤其 iOS Safari 和多数 WebView）。此时 flex 容器仍按“原始 100vh”撑开，底部元素被挤到可视区外。
常见错误现象：
- 页面刚加载正常，input 聚焦后底部按钮突然消失或半截卡在屏幕外
- 安卓 Chrome 某些版本中
100vh变成约70vh，但 flex 布局没响应变化 - 使用
min-height: 100vh后，内容不足时底部仍上浮
env(safe-area-inset-bottom) 是目前最轻量可靠的方案
现代 iOS 和较新安卓浏览器（Chrome 90+、Edge 90+）支持 env(safe-area-inset-bottom)，它在软键盘弹出时**自动更新为键盘高度**（前提是 viewport 配置正确）。
必须同时满足两个条件：
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">- CSS 中用
bottom: env(safe-area-inset-bottom, 0)替代固定数值
示例：
nav {
position: fixed;
bottom: env(safe-area-inset-bottom, 0);
left: 0;
right: 0;
height: 60px;
}
兼容老 Safari 可加回退：
nav {
bottom: constant(safe-area-inset-bottom, 0);
bottom: env(safe-area-inset-bottom, 0);
}
监听 resize + focusin 是安卓 WebView 的兜底手段
部分安卓 WebView（如微信内置、QQ 浏览器、旧版 UC）不更新 env(safe-area-inset-bottom)，需 JS 主动判断键盘状态。
关键点不是监听 resize 本身，而是结合 focusin 和高度差阈值：
- 只监听
input和textarea的focusin（非focus，避免冒泡问题） - 记录初始
window.innerHeight，聚焦后对比：若差值 > 150px，视为键盘弹出 - 不要依赖
document.body.scrollHeight—— 它在很多安卓机型上不随键盘变化
示例逻辑：
let initHeight = window.innerHeight;
document.addEventListener('focusin', (e) => {
if (e.target.matches('input, textarea')) {
const diff = initHeight - window.innerHeight;
if (diff > 150) {
document.body.classList.add('keyboard-open');
}
}
});
CSS 配合：
nav {
bottom: 0;
}
body.keyboard-open nav {
bottom: calc(env(safe-area-inset-bottom, 0) + 200px);
}
position: sticky 比 fixed 更稳定，但有滚动依赖
对于底部导航栏，position: sticky 天然规避了 viewport 高度收缩问题，因为它依赖父容器流式布局，而非绝对视口坐标。
但要注意两个硬性前提：
- 父容器必须有明确高度（如
min-height: 100vh），且内容需能触发滚动（否则 sticky 不生效） - 需确保父容器可滚动（
overflow-y: auto或内容溢出），不能让 body 自己滚动
推荐结构：
<div class="page-container"> <main>...内容...</main><nav>底部按钮</nav> </div>
.page-container {
min-height: 100vh;
display: flex;
flex-direction: column;
}
nav {
position: sticky;
bottom: 0;
margin-top: auto;
padding-bottom: env(safe-area-inset-bottom, 0);
}
这个组合在 iOS 和多数安卓浏览器中表现一致，且无需 JS 监听 —— 唯一复杂点是滚动上下文必须由容器接管，不能交给 body。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
