使用 100dvh 单位配合 position: fixed 即可实现。当虚拟键盘弹起时，视口高度（visual viewport）会缩小，dvh 会自动适配这个新高度，从而让底部栏始终位于可见区域的底部，避免被键盘遮挡或产生多余空白。
100dvh 与 100vh 的高度差异是什么
100vh 锁定的是包含地址栏的完整浏览器视口高度，在移动端键盘弹出时它不会变化，导致固定定位的元素可能落在键盘下方不可见区域。而 100dvh 动态绑定可视视口高度，键盘弹出时自动收缩，确保布局紧贴当前可用屏幕边缘。
<!DOCTYPE html>
<html lang="zh">
<head>
<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>
</head>
<body>
<div class="content">
<p>滚动内容...</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<p>更多内容...</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/gongju/2905" title="CSS"><img
src="https://img.php.cn/upload/manual/000/969/633/6af2b1226ad9e733.png" alt="CSS" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/gongju/2905" title="CSS">CSS</a>
<p>CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。</p>
</div>
<a href="/xiazai/gongju/2905" title="CSS" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<input type="text" placeholder="点击此处唤起键盘">
</div>
<div class="bottom-bar">
<button>提交</button>
</div>
</body>
</html>运行上述代码，在移动端浏览器中点击输入框，底部操作栏会随键盘上移，保持在新的可视区域底部。若将 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 相对于可视视口定位，键盘弹出时可视视口高度减小，底部栏随之上移，始终处于键盘上方的可见区域。实际测试中，输入框聚焦后，底部栏立即响应高度变化，无遮挡现象。
