使用Google Maps元素定义div(CSS)的百分比高度

Question

我正在尝试为我的网站创建一个"联系人"部分,我在左侧有文本,右侧有Google地图元素以显示我们的位置.目前我已经设法让div彼此相邻,但问题是我似乎无法获得地图的高度以匹配旁边的div.我看过其他问题和例子,最流行的答案似乎是"添加一个包装并将其高度和宽度定义为100%,然后将div的高度定义为100%",但这并不适用于我.我不想为地图定义固定的px高度,因为它不会以响应的方式适应窗口的宽度.

目前我有:

HTML

<!-- CONTACT SECTION -->
  <div class="third" id="contacts">

    <div class="starter-template">
      <h2>Contact Us</h2><br>
      <div class="basic-container">
        <div class="contact">
          <p class="lead">Location</p>
          <p>The student team spaces can be found at Urban Mill, located between Startup Sauna and Aalto Design Factory at the Aalto University campus in Otaniemi, Espoo (Street Address: Betonimiehenkuja 3, Espoo, Finland). Most of the lectures will also be held at Urban Mill. The accommodation of the students is at Forenom Hostel (Street Address: Kivimiehentie 2, Espoo), which is only a 5-minute walk away from Urban Mill.<br><br></p>
          <p class="lead">Get in Touch</p>
          startupsummerprogram@outlook.com</p>
        </div>
        <div class="contact">
          <iframe id="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7936.021807966812!2d24.832175000000017!3d60.18064199999999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x468df58d0b88505f%3A0xaacf6d4afeea4ebb!2sUrban+Mill!5e0!3m2!1sfi!2sfi!4v1434351601478" frameborder="0" style="border:0"></iframe>
        </div>
      </div>
    </div>

  </div>

和CSS:

.third {
  position: relative;
  z-index: 100;
  width: 100%;
  background-color: #F7F7F7;
}

.basic-container {
  width: 70%;
  margin: 0 auto;
  text-align: justify;
}

.contact {
  width: 49%;
  height: 100%;
  display: inline-block;
  padding: 2%;
}

.contact p.lead {
  text-align: left;
}

#map {
  width: 100%;
  height: 100%;
}

HTML代码中看到的starter-template因为我正在使用的入门Bootstrap模板而存在.我不相信它影响这个高度问题,但:)

我创建的代码:

我想要的是这个(我通过为地图的高度添加固定的px值来实现此演示):

必须有一个简单的方法来处理这个,但由于某种原因,我的大脑不想与我合作.所有的帮助非常感谢:)

乔安娜