如何解决CSS Flex布局在移动端输入法弹出时的变形

设置 height: 100vh 会导致 flex 布局在输入法弹出时变形，因其按初始视口高度计算且 ios safari 等不更新 vh 或触发 resize；应改用 min-height/max-height: 100dvh + overflow-y: auto，并对关键区域设 flex-shrink: 0 或 flex: 0 0 auto，配合 visualviewport.resize 监听与防抖处理。

如何解决css flex布局在移动端输入法弹出时的变形_设置固定高度

为什么设置 height: 100vh 会让 Flex 布局在输入法弹出时变形

因为 height: 100vh 是按“初始视口高度”计算的固定值，而 iOS Safari 和部分 Android WebView 在软键盘弹出时不会更新 vh 单位，也不会触发 resize 事件。结果就是：Flex 容器仍按全屏高度渲染，但实际可视区域被压缩，导致内容被截断、底部输入框被遮挡、flex: 1 区域塌陷或滚动错乱。

用 min-height + max-height 替代 height 的实操要点

直接替换掉所有 height: 100vh，改用更弹性的约束：

min-height: 100dvh —— 确保内容少时也能撑满当前可见视口（Chrome 105+、Safari 16.4+ 支持）
max-height: 100dvh —— 防止内容过多时容器无限拉伸，挤压子项
overflow-y: auto —— 让内部可滚动，而不是靠 flex 压缩来“适应”变小的视口

例如登录页容器：

CSS婚礼策划服务机构宣传网站模板

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

下载

.container {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  max-height: 100dvh;
  overflow-y: auto;
}
.header { flex-shrink: 0; }
.main { flex: 1; overflow-y: auto; }
.footer { flex-shrink: 0; }