iframe在移动端自适应高度时为什么总留白？

你这个问题在移动端留白，大概率是 height: 100vh 在 iOS Safari 上的坑。很多开发者都踩过——iOS 的 vh 单位会把地址栏的高度也算进去，导致实际可用视口高度小于 100vh，页面滚动时还会动态变化，所以 iframe 高度算不准。

你现在的结构用了 padding-bottom: 56.25% 做响应比，但 iframe 是绝对高度，两者没对齐。而且直接写 height: 100% 要求父级有明确高度，.map-container 是相对定位又没给固定高，iframe 拿不到参考值。

解决办法分两步：

第一，放弃 100vh，用 JS 动态设置高度，同时监听 resize 和 load 事件。iOS 上 iframe 内容加载完成前拿不到正确高度，必须等 load 触发后再计算。

第二，防止注入攻击，别直接让第三方页面随意通信。如果对方支持 postMessage，可以约定消息格式获取内容高度。

下面是能跑通的代码：

function setIframeHeight() {

  const iframe = document.querySelector('iframe');

  const container = document.querySelector('.map-container');

  

  // 用容器宽度按比例算高度

  const width = container.offsetWidth;

  const height = width * (9 / 16); // 16:9 反推



  iframe.style.height = height + 'px';

}



// 页面加载完和窗口变化时更新

window.addEventListener('load', setIframeHeight);

window.addEventListener('resize', setIframeHeight);

CSS 改成这样：

html, body {

  margin: 0;

  padding: 0;

}

.map-container {

  width: 100%;

  position: relative;

}

.map-container iframe {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: auto; /* 让 JS 控制 */

  border: none;

}

如果你非要从 iframe 内部取真实高度，那就得让目标页面配合发 postMessage，像这样：

// 在嵌入的页面里（https://map.example.com）

window.addEventListener('load', () => {

  parent.postMessage({

    source: 'map-height',

    height: document.body.scrollHeight

  }, 'https://your-domain.com'); // 防止注入，指定 origin

});

然后主页面监听：

window.addEventListener('message', (e) => {

  if (e.origin !== 'https://map.example.com') return; // 安全校验

  if (e.data.source === 'map-height') {

    document.querySelector('iframe').style.height = e.data.height + 'px';

  }

});

总结：优先用 JS 根据容器宽高比算高度，稳定且不依赖外部通信。100vh 在移动端不可靠，尤其 iOS，早点弃用少踩坑。