如何使Google Maps iframe匹配相邻div的高度？

我太懂这种糟心的情况了——Google Maps的iframe总是有点“自我意识”，哪怕你用了flex或者table布局来强制高度匹配，它还是会根据视口偷偷调整，导致和旁边的div高度对不上。咱们来一步步把这个问题解决掉：

1. 先重置iframe的默认样式 #

Google Maps嵌入的iframe自带默认边框、内边距，甚至可能硬编码了高度值，这些都会干扰布局。先把这些清理掉：

.section9 iframe {
  margin: 0;
  padding: 0;
  border: none; /* 移除默认的灰色边框 */
  width: 100%;
  height: 100%; /* 让iframe完全占满父容器的高度 */
}

2. 优化Flex布局（推荐方案） #

如果你用的是flex布局，确保父容器和子元素的flex属性设置正确，避免高度塌陷：

/* 给包含contact card和地图的容器设置flex */
.section9 .col-12 {
  display: flex;
  height: 100%; /* 或者设置具体的最小高度，比如 min-height: 450px */
  gap: 1rem; /* 可选：给两个元素之间加间距 */
}

/* 让contact card和地图容器都平分可用空间 */
.section9 .col-12 > div, 
.section9 .col-12 > .map-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column; /* 确保内部内容不会溢出 */
}

同时给iframe套一个容器（比如.map-wrapper），避免iframe直接作为flex子元素出现样式冲突：

<section class="section9">
  <div class="col-12">
    <!-- 你的contact card div -->
    <div class="contact-card">...</div>
    <!-- 地图容器 -->
    <div class="map-wrapper">
      <iframe src="你的Google Maps嵌入链接" frameborder="0"></iframe>
    </div>
  </div>
</section>

3. 修复Table-Cell布局问题 #

如果你坚持用table+table-cell的流式网格，要确保所有层级的容器都设置了100%高度：

.section9 .col-12 {
  display: table;
  width: 100%;
  height: 100%; /* 关键：让table容器继承父级高度 */
  border-collapse: separate;
  border-spacing: 1rem; /* 替代gap的间距 */
}

.section9 .col-12 > div, 
.section9 .col-12 > .map-wrapper {
  display: table-cell;
  vertical-align: top;
  height: 100%; /* 让table-cell子元素高度一致 */
}

.map-wrapper {
  height: 100%; /* 确保iframe容器高度填满table-cell */
}

额外注意事项 #

• 检查Google Maps的嵌入代码：如果代码里自带height属性，一定要删掉，让CSS来控制高度
• 兜底最小高度：在父容器上设置min-height（比如min-height: 400px），避免视口过小时内容塌陷
• 避免iframe内部高度变化：如果地图加载后会调整高度，可以给iframe加loading="lazy"，或者用简单的JS监听加载事件同步高度，但优先用CSS解决，减少JS依赖

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