使用 100dvh 单位配合 position: fixed 即可实现。当虚拟键盘弹起时，视口高度（visual viewport）会缩小，dvh 会自动适配这个新高度，从而让底部栏始终位于可见区域的底部，避免被键盘遮挡或产生多余空白。
100dvh 与 100vh 的高度差异是什么
100vh 锁定的是包含地址栏的完整浏览器视口高度，在移动端键盘弹出时它不会变化，导致固定定位的元素可能落在键盘下方不可见区域。而 100dvh 动态绑定可视视口高度，键盘弹出时自动收缩，确保布局紧贴当前可用屏幕边缘。
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"><style>
body {
margin: 0;
padding: 0;
height: 100dvh;
display: flex;
flex-direction: column;
background-color: #f0f0f0;
}
.content {
flex: 1;
padding: 20px;
overflow-y: auto;
}
.bottom-bar {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 60px;
background-color: #fff;
border-top: 1px solid #ddd;
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}
input {
width: 100%;
padding: 10px;
box-sizing: border-box;
}
</style><div class="content">
<p>滚动内容...</p>
<p>更多内容...</p>
<input type="text" placeholder="点击此处唤起键盘">
</div>
<div class="bottom-bar">
<button>提交</button>
</div>
运行上述代码，在移动端浏览器中点击输入框，底部操作栏会随键盘上移，保持在新的可视区域底部。若将 height: 100dvh 改为 100vh，底部栏将静止在原位，可能被键盘覆盖。
为什么需要设置 viewport-fit=cover
在全面屏设备上，默认视口可能避开刘海或圆角区域，导致 dvh 计算出的高度与实际可用空间不符。添加 viewport-fit=cover 允许网页内容延伸至屏幕边缘，使 dvh 能准确反映全屏可用高度，避免底部栏出现偏移或留白。
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
此元标签是启用 dvh 自适应的关键配置。缺少它时，部分浏览器可能仍按安全视口计算高度，导致键盘弹出时底部栏位置不准确。结合 position: fixed 和 bottom: 0，可确保在任何屏幕形态下，操作栏始终贴合当前可视边界。
键盘弹出时底部栏是否会被遮挡
不会。由于 100dvh 动态调整容器高度，且底部栏使用 position: fixed 相对于可视视口定位，键盘弹出时可视视口高度减小，底部栏随之上移，始终处于键盘上方的可见区域。实际测试中，输入框聚焦后，底部栏立即响应高度变化，无遮挡现象。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
