点击下拉框时如何让Modal适配内容消除滚动条？求动/静态方案

先修正Dropdown的结构错误 #

你的Dropdown HTML结构不符合Bulma规范，dropdown-menu不该嵌套在button内部，正确结构是dropdown容器下包含同级的dropdown-trigger和dropdown-menu，错误结构会导致布局异常，这也是滚动条出现的原因之一。修正后的结构如下：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">

<div class="modal is-active" id="mymodal">
  <div class="modal-background"></div>
  <div class="modal-content">
    <div class="box">
      <article class="media">
        <div class="media-content">
          <div class="content">
            this is a test:   
            <div class="dropdown" id="mydropdown">
              <div class="dropdown-trigger">
                <button class="button" aria-haspopup="true" aria-controls="dropdown-menu" onclick="activateDropDown()">
                  <span>Dropdown button</span>
                  <span class="icon is-small">
                    <i class="fas fa-angle-down" aria-hidden="true"></i>
                  </span>
                </button>
              </div>
              <!-- dropdown-menu与dropdown-trigger同级 -->
              <div class="dropdown-menu" id="dropdown-menu" role="menu">
                <div class="dropdown-content">
                  <a href="#" class="dropdown-item">test 1</a>
                  <a href="#" class="dropdown-item">test 2</a>
                  <a href="#" class="dropdown-item">test 3</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </article>
    </div>
  </div>
  <button class="modal-close is-large" aria-label="close" onclick="closeModal()"></button>
</div>

动态调整Modal尺寸的方案 #

Bulma的modal-content默认有max-height: calc(100vh - 16px)和overflow-y: auto，而dropdown-menu是绝对定位，脱离了modal-content的文档流，所以modal-content不会自动撑开。要实现动态适配，有两种思路：

思路1：调整Dropdown的定位上下文 #

让dropdown-menu相对于modal而非dropdown定位，这样下拉菜单不会被modal-content的溢出裁剪，也不会触发滚动条：

.modal {
  position: relative;
}

#mydropdown .dropdown-menu {
  position: absolute;
  top: auto;
  bottom: 100%; /* 可根据需求调整位置 */
  left: 50%;
  transform: translateX(-50%);
}

思路2：动态计算高度调整Modal #

激活Dropdown时，获取下拉菜单的高度，然后设置modal-content的最小高度来容纳它：

function activateDropDown () {
    var dropdown = document.getElementById("mydropdown");
    dropdown.classList.add("is-active");
    
    // 获取下拉菜单高度
    const dropdownMenu = document.getElementById("dropdown-menu");
    const menuHeight = dropdownMenu.offsetHeight;
    // 获取modal-content当前高度
    const modalContent = document.querySelector(".modal-content");
    const contentHeight = modalContent.offsetHeight;
    
    // 计算所需最小高度，避免超出视口
    const viewportMaxHeight = window.innerHeight - 16;
    modalContent.style.minHeight = `${Math.max(contentHeight + menuHeight, viewportMaxHeight)}px`;
};

静态调整的方案 #

如果不需要动态适配，直接修改modal-content的样式即可：

方案1：移除溢出限制 #

取消modal-content的最大高度和滚动设置，让内容自然撑开：

.modal-content {
  max-height: none;
  overflow-y: visible;
}

注意：如果Modal内容过多会超出视口，需根据实际场景判断是否适用。

方案2：固定最小高度 #

直接给modal-content设置足够容纳下拉菜单的最小高度，比你之前的modalheight类更直接：

.modal-content {
  min-height: 500px; /* 根据下拉菜单总高度设置 */
}

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