移动端页面底部按钮覆盖元素问题的修复咨询

核心解决思路 #

问题根源是按钮采用固定定位绑定视口底部，当移动端键盘弹出时视口高度被压缩，固定元素会基于新视口定位导致覆盖键盘。以下是三种可落地的修复方案：

方案一：用粘性定位替代固定定位 #

在移动端媒体查询中修改.button_div的CSS：

@media (max-width: 782px) {
  .button_div {
    position: sticky;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px 0;
    background-color: #fff; /* 与页面主体背景一致，防止内容穿透 */
    z-index: 100;
  }
}

• 优势：无需JS，粘性定位会让按钮始终贴在页面内容底部，而非视口底部，自动适配键盘弹出场景。

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

若必须保留固定定位，通过JS监听窗口高度变化，动态修改按钮的bottom值：

window.addEventListener('resize', function() {
  const buttonDiv = document.querySelector('.button_div');
  const viewportHeight = window.innerHeight;
  // 当视口高度骤减至屏幕高度70%以下时，判定为键盘弹出
  buttonDiv.style.bottom = viewportHeight < window.screen.height * 0.7 ? '200px' : '0';
});

配合基础CSS设置：

@media (max-width: 782px) {
  .button_div {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 100;
  }
}

• 注意：200px为适配键盘的参考值，可根据测试设备的键盘高度调整。

方案三：基于父容器的绝对定位 #

给页面内容的父容器添加相对定位，按钮设为父容器的绝对底部：

@media (max-width: 782px) {
  .page_container { /* 页面内容的父容器 */
    position: relative;
    min-height: 100vh;
    padding-bottom: 60px; /* 预留按钮高度的间距，避免内容被遮挡 */
  }
  .button_div {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px; /* 按钮容器的固定高度 */
  }
}

• 优势：按钮跟随内容容器的底部定位，键盘弹出时内容容器高度自适应，按钮不会覆盖键盘。

内容的提问来源于stack exchange，提问作者Andrzej Hnatiuk