应使用 min-height: 100dvh + max-height: 100dvh + overflow-y: auto 替代 height: 100vh，配合 flex-shrink: 0 和 visualViewport.resize 监听，在不支持 dvh 时降级并用 JS 动态更新高度。
输入法弹出导致 flex 容器高度塌陷或滚动错乱
移动端（尤其是 iOS Safari）软键盘弹出时，浏览器会动态调整视口高度，但不会触发 resize 事件，vh 单位会按“原始视口”计算，而 flex 容器若依赖 height: 100vh 或 flex: 1 撑满，就会出现内容被截断、底部输入框被遮挡、甚至整个 flex 布局纵向压缩变形。
根本原因不是 Flex 本身有问题，而是它对“可用高度”的响应滞后于键盘状态变化。
- 不要用
height: 100vh作为 flex 容器的高度基准 - 避免在键盘活跃时依赖
document.documentElement.clientHeight—— 它在 iOS 上不随键盘弹出实时更新 - Android Chrome 相对友好，但也要防兼容性差异
用 min-height + max-height 替代固定 height
改用基于内容的弹性高度约束，让容器既能撑开又能收缩，不强求“填满屏幕”。例如登录页常见布局：
.container {
display: flex;
flex-direction: column;
min-height: 100dvh; /* 关键：用 dvh（dynamic viewport height） */
max-height: 100dvh;
overflow-y: auto;
}
<p>.header { flex-shrink: 0; }
.main { flex: 1; overflow-y: auto; }
.footer { flex-shrink: 0; }
</p>
dvh 是 CSS 新单位（Chrome 105+、Safari 16.4+ 支持），代表“当前可见视口高度”，键盘弹出时自动更新。比 vh 更可靠；不支持时可降级为 100vh，但需配合 JS 补偿。
-
min-height: 100dvh确保内容少时也能撑满屏幕 -
max-height: 100dvh防止内容多时容器无限拉伸 -
overflow-y: auto在键盘弹出后允许内部滚动，而非挤压 flex 子项
监听 focus/blur 手动修正容器高度
对于需要兼容老版本 Safari（dvh 不可用）或复杂表单场景，必须用 JS 捕获输入框焦点状态来干预布局：
${h}px
注意：直接设 style.height 会覆盖 CSS 中的 flex 行为，所以仅用于临时修正；更稳妥的做法是切换一个 class，用 CSS 变量控制高度：
.container.keyboard-active { height: var(--keyboard-height, 100dvh); }
为什么不用 position: fixed 把输入框钉在底部？
看似简单，但会破坏 Flex 的语义流和可访问性：键盘弹出后 fixed 元素可能脱离焦点管理、与屏幕阅读器交互异常，且在部分 Android 浏览器中仍会触发页面上推（造成双滚动）。更重要的是，它绕开了 Flex 布局本应解决的“自适应分配空间”问题，属于退化方案。
真正要守住的是 Flex 的结构意图——比如“标题固定、主体自适应、输入框贴底”，那就该用 flex-shrink: 0 + margin-top: auto 组合，而不是靠定位硬塞。
最易被忽略的一点：iOS 上即使用了 dvh，首次加载时若输入框已获得焦点（如 autofocus），visualViewport 可能尚未就绪，需要加一层 setTimeout 延迟初始化或监听 DOMContentLoaded 后再绑定事件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
