WordPress手风琴组件内嵌外部iframe移动端高度异常问题求助

方案1：手风琴展开时重新计算iframe高度 #

手风琴的展开/折叠是动态操作，多数自适应iframe的JS仅在页面加载时执行一次，手风琴展开后容器尺寸变化但JS未触发重算。给手风琴的展开事件绑定高度重置逻辑：

// 替换为你手风琴展开按钮的实际类名
document.querySelectorAll('.accordion-toggle').forEach(toggle => {
  toggle.addEventListener('click', function() {
    // 延迟执行确保手风琴完全展开，可根据动画时长调整毫秒数
    setTimeout(() => {
      const iframe = document.querySelector('#your-iframe-id'); // 替换为你的iframe ID
      if (iframe) {
        iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px';
      }
    }, 300);
  });
});

注：如果iframe和主站跨域，contentWindow会受同源策略限制，需跳过此方案。

方案2：用CSS强制裁剪冗余空白 #

给iframe容器和iframe本身添加样式，强制限制高度并隐藏溢出：

/* 替换为你的iframe容器类名 */
.iframe-container {
  width: 100%;
  overflow: hidden;
}

.iframe-container iframe {
  display: block;
  height: auto !important;
  max-height: 550px; /* 根据计算器实际高度调整 */
  width: 100%;
}

方案3：修复手风琴容器的溢出设置 #

部分手风琴组件会给内容容器设置固定高度或overflow: auto，导致iframe高度计算异常。修改手风琴内容容器的CSS：

/* 替换为你的手风琴内容容器类名 */
.accordion-content {
  height: auto !important;
  overflow: visible !important;
}

方案4：用aspect-ratio固定比例适配 #

如果计算器页面的宽高比固定，用CSS aspect-ratio强制适配，避免动态计算问题：

.iframe-container {
  position: relative;
  width: 100%;
  aspect-ratio: 3/2; /* 根据计算器实际比例调整 */
}

.iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

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