移动端浏览器弹出键盘时页面布局异常的CSS修复求助

问题描述 #

开发的仿WhatsApp网页聊天应用，布局分为header、main、footer三部分：

• header和footer始终固定在屏幕可视区域
• main区域设置overflow-y: scroll用于滚动查看消息

最初使用Flexbox布局在移动端浏览器表现正常，但近期三星Internet、Google Chrome更新后，点击输入框弹出键盘时出现以下问题：

• 弹出键盘时页面轻微上移
• Header元素消失
• Footer元素被键盘遮挡
• 输入时Footer元素偶尔轻微显示

解决方案 #

核心是使用**动态视口单位dvh**替代固定百分比高度，配合布局规则优化，让页面高度自动适配键盘弹出后的可用视口：

关键修改点 #

1. 替换height: 100%为height: 100dvh：dvh会实时计算键盘弹出后的可用视口高度，而非绑定初始屏幕高度
2. 给body添加overflow: hidden：防止页面整体滚动导致header被顶出可视区域
3. 确保main区域占满剩余空间并可滚动：Flex布局下添加flex: 1，Grid布局保持原1fr配置

修改后的Grid布局代码 #

* {
  margin: 0;
  padding: 0;
}
html {
  height: 100dvh; /* 替换100%为动态视口高度 */
}
body {
  height: 100dvh;
  background-color: yellow;
  overflow: hidden; /* 禁止页面整体滚动 */
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 60px 1fr 60px;
}
.header {
  padding: 10px;
  background-color: tomato;
}
.main {
  background-color: moccasin;
  overflow-y: scroll;
}
.footer {
  background-color: tomato;
  padding: 10px;
}
.input {
  background-color: white;
}
.main p {
  margin: 10px;
  padding: 10px;
  background-color: lime;
}

<div class="header">
  Header
</div>

<div class="main">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<div class="footer">
  <div class="input" contenteditable="true">Content editable div</div>
</div>

修改后的Flex布局代码 #

若使用Flex布局，只需替换body的Grid规则为以下代码：

body {
  height: 100dvh;
  background-color: yellow;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.main {
  flex: 1; /* 占满剩余空间 */
  background-color: moccasin;
  overflow-y: scroll;
}

原理说明 #

• dvh（Dynamic Viewport Height）是CSS新视口单位，会根据当前可用视口高度动态调整，完美适配键盘弹出/收起的场景
• overflow: hidden避免页面整体滚动，防止浏览器自动上移页面导致header超出可视区域
• 无论是Grid还是Flex布局，只要确保main区域占满剩余空间，就能保证header和footer始终固定在视口顶部和底部

内容的提问来源于stack exchange，提问作者Q.zero