移动端菜单底部添加按钮的实现及跨端适配问题求助

这个问题我太熟了！移动端的100vh确实是个坑——不同浏览器的导航栏、工具栏会挤占可视空间，而且它们的高度还不统一，固定bottom:131px自然没法适配所有设备。给你几个靠谱的解决思路：

直接把按钮固定在视口底部，彻底绕开100vh的兼容性问题。菜单容器不用强制设满屏高度，让它自然滚动即可，只要给菜单加个底部内边距，避免内容被按钮挡住就行。

/* 底部按钮样式 */
.mobile-menu-bottom-btn {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  /* 自动适配iPhone等设备的底部安全区域，不用硬写数值 */
  padding-bottom: env(safe-area-inset-bottom);
  background: #你的按钮背景色;
  height: 60px; /* 按需设置按钮高度 */
}

/* 给菜单容器加底部内边距，避开按钮 */
.mobile-menu-container {
  padding-bottom: calc(60px + env(safe-area-inset-bottom));
}

把菜单容器设为垂直方向的Flex布局，给底部按钮加margin-top: auto，它会自动被“推”到容器底部。这种方式不用定位，布局逻辑更清晰。

.mobile-menu-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* 最小高度占满视口，内容超出时自动滚动 */
  padding-bottom: env(safe-area-inset-bottom);
}

.mobile-menu-bottom-btn {
  margin-top: auto;
  padding-bottom: env(safe-area-inset-bottom);
  /* 其他按钮样式 */
}

如果必须用absolute定位，那就通过JS获取实时的可视窗口高度，动态设置菜单容器的高度，替代固定的100vh：

function updateMenuHeight() {
  // 获取当前可视窗口的高度（排除浏览器栏）
  const viewportHeight = window.innerHeight;
  document.querySelector('.mobile-menu-container').style.height = `${viewportHeight}px`;
}

// 初始化时设置，还要监听窗口变化（比如浏览器栏收起/展开）
window.addEventListener('load', updateMenuHeight);
window.addEventListener('resize', updateMenuHeight);

之后按钮的bottom可以结合env(safe-area-inset-bottom)设置，不用写死固定值。

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