移动端浏览器中Bulma Modal Card被工具栏遮挡的问题求助

我之前在移动端用Bulma的Modal Card开发时也碰到过一模一样的问题——尤其是带输入框的弹窗，底部浏览器工具栏会把确认/取消按钮挡住，手指根本点不到。分享几个亲测有效的解决方案，都能实现随浏览器UI变化自动调整Modal尺寸：

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

浏览器工具栏显示或隐藏时，window.innerHeight会发生变化，我们可以监听这个变化来实时调整Modal的最大高度：

// 定义调整Modal高度的函数
function adjustModalHeight() {
  const modalCard = document.querySelector('.modal-card');
  if (!modalCard) return;
  
  // 给上下留出40px的边距，避免内容贴死屏幕边缘
  modalCard.style.maxHeight = `${window.innerHeight - 40}px`;
  // 内容超过高度时允许滚动
  modalCard.style.overflowY = 'auto';
}

// 页面加载完成后初始化
window.addEventListener('DOMContentLoaded', adjustModalHeight);
// 监听窗口大小变化（包括工具栏显示/隐藏）
window.addEventListener('resize', adjustModalHeight);
// 监听输入框聚焦/失焦（应对软键盘弹出/收起的场景）
document.addEventListener('focusin', adjustModalHeight);
document.addEventListener('focusout', adjustModalHeight);

这个方案的好处是精准，不管是浏览器工具栏变化还是软键盘弹出，都能立刻调整Modal高度，保证底部按钮始终在可视范围内。

方案二：结合CSS变量适配真实视口高度 #

有些移动端浏览器的100vh会包含工具栏的高度，导致计算不准。我们可以用CSS变量来获取真实的视口高度：

首先初始化CSS变量：

function setVhVariable() {
  // 计算1vh对应的真实像素值
  const vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
}

window.addEventListener('DOMContentLoaded', setVhVariable);
window.addEventListener('resize', setVhVariable);

然后修改Modal的CSS样式：

.modal-card {
  max-height: calc(var(--vh, 1vh) * 95); /* 占真实视口的95% */
  overflow-y: auto;
}

/* 针对移动端优化 */
@media screen and (max-width: 768px) {
  .modal.is-active .modal-card {
    margin: 1rem;
    width: calc(100% - 2rem);
  }
}

这种方案更贴合CSS原生的写法，配合JS监听变化，兼容性也不错。

方案三：固定Modal的屏幕位置 #

直接给Modal设置固定的上下边距，让它始终在浏览器可视区域内：

.modal-card-fixed {
  position: fixed;
  top: 1rem;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
  max-height: unset;
  overflow-y: auto;
}

然后把这个类加到你的modal-card元素上：

<div class="modal-card modal-card-fixed">
  <!-- Modal内容 -->
</div>

这个方案最简单粗暴，适合不需要Modal占满整个屏幕的场景，能快速解决遮挡问题。

小提示 #

如果你的Modal里有多个输入框，建议在每个输入框聚焦时都触发一次高度调整，确保软键盘弹出后内容不会被遮挡。

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