移动端虚拟键盘弹起时如何用CSS避免底部被顶起？-css教程-PHP中文网

使用 100dvh 作为视口高度单位，并配合 position: fixed 或 sticky 布局，可以确保底部元素在虚拟键盘弹起时保持固定位置而不被顶起。具体做法是将容器高度设为 100dvh，并将底部操作栏设为 position: fixed; bottom: 0，这样键盘弹出时，视口可视区域缩小，但底部栏始终吸附在屏幕最底端。

移动端虚拟键盘弹起时如何用CSS避免底部被顶起？

`100dvh` 与 `100vh` 的高度差异是什么

100vh 包含地址栏和工具栏的总高度，而 100dvh 是动态视口高度，会随虚拟键盘弹起自动调整。当键盘出现时，100vh 不变，导致内容溢出或被遮挡；100dvh 减小，使页面重新适配当前可视区域。使用 100dvh 可避免底部被顶起的问题。

移动端虚拟键盘弹起时如何用CSS避免底部被顶起？

/* CSS 示例 */
body {
  margin: 0;
  height: 100dvh; /* 动态视口高度 */
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 1px solid #eee;
  padding: 12px;
}

如何验证 `100dvh` 在不同浏览器中的兼容性

100dvh 在现代移动端浏览器（如 Chrome、Safari、Firefox）中已得到广泛支持。验证方法是在开发者工具中模拟键盘弹起，观察页面高度是否自动调整。若不支持，可回退到 100vh 并监听 resize 事件动态计算高度。

CSS

CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。

下载

移动端虚拟键盘弹起时如何用CSS避免底部被顶起？

// JavaScript 兼容性检测示例
if (CSS.supports('height', '100dvh')) {
  document.body.style.height = '100dvh';
} else {
  // 回退方案
  const setHeight = () => {
    document.body.style.height = window.innerHeight + 'px';
  };
  window.addEventListener('resize', setHeight);
  setHeight();
}