HTML CSS：移动端键盘弹出时如何上推固定定位的底部工具栏？

Chrome移动端键盘弹出时，fixed定位的底部工具栏未被推至键盘上方，核心原因是fixed元素的bottom值基于初始视口高度，键盘弹出后视口高度被压缩，工具栏会被键盘遮挡。以下是几种可行的解决办法：

方案1：监听视口高度变化动态调整位置 #

通过JavaScript监听窗口resize事件，判断键盘是否弹出，然后动态修改工具栏的bottom值：

// 保存初始视口高度
const initialViewportHeight = window.innerHeight;
const toolbar = document.querySelector('.toolbar');

window.addEventListener('resize', () => {
  const currentHeight = window.innerHeight;
  // 当视口高度骤降（小于初始高度的80%），判定为键盘弹出
  if (currentHeight < initialViewportHeight * 0.8) {
    const keyboardHeight = initialViewportHeight - currentHeight;
    toolbar.style.bottom = `${keyboardHeight}px`;
  } else {
    // 键盘收起，恢复初始定位
    toolbar.style.bottom = '0';
  }
});

方案2：结合CSS env()函数（适配部分浏览器） #

部分移动端浏览器支持env(safe-area-inset-bottom)，可以尝试用它替代固定的bottom:0，同时配合resize事件增强兼容性：

.toolbar {
  width: 100%;
  display: flex;
  padding: 1rem 0 2rem 0;
  position: fixed;
  bottom: env(safe-area-inset-bottom);
  right: 0;
  left: 0;
}

注意：Chrome移动端对键盘弹出时的env(safe-area-inset-bottom)更新支持不稳定，建议搭配方案1的JS逻辑使用。

方案3：改用position: sticky（页面结构允许时） #

如果工具栏位于可滚动容器的底部，可以尝试使用sticky定位，它会随容器滚动和视口变化自动调整位置：

.toolbar {
  width: 100%;
  display: flex;
  padding: 1rem 0 2rem 0;
  position: sticky;
  bottom: 0;
}

前提：父容器不能设置overflow:hidden，且容器高度需覆盖视口范围。

方案4：优化viewport设置 #

确保页面的meta viewport标签配置正确，让浏览器能正确计算视口高度变化：

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

优先推荐方案1，它的兼容性最好，能准确适配Chrome移动端的键盘弹出/收起场景。

内容的提问来源于stack exchange，提问作者Alvin Stefanus