使用 100dvh 作为视口高度单位，并配合 position: fixed 或 sticky 布局，可以确保底部元素在虚拟键盘弹起时保持固定位置而不被顶起。具体做法是将容器高度设为 100dvh，并将底部操作栏设为 position: fixed; bottom: 0，这样键盘弹出时，视口可视区域缩小，但底部栏始终吸附在屏幕最底端。
100dvh 与 100vh 的高度差异是什么
100vh 包含地址栏和工具栏的总高度，而 100dvh 是动态视口高度，会随虚拟键盘弹起自动调整。当键盘出现时，100vh 不变，导致内容溢出或被遮挡；100dvh 减小，使页面重新适配当前可视区域。使用 100dvh 可避免底部被顶起的问题。
/* 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 事件动态计算高度。
立即学习“前端免费学习笔记（深入）”；
// 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();
}当输入框位于底部时，如何确保其不被键盘遮挡
将输入框包裹在 position: relative 的容器中，并使用 scrollIntoView() 方法在键盘弹起时自动滚动至可视区域。同时，结合 100dvh 和 fixed 定位，可确保输入框始终可见且不被遮挡。
