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

Question

我正试图为我的网站创建一个“联系”部分，在左侧放置文本，在右侧放置Google地图元素以显示我们的位置。目前我已经成功让这两个div相邻，但问题是我无法调整地图的高度以匹配其旁边的div。我已经查看了其他问题和示例，最受欢迎的答案似乎是“添加包装器并将其高度和宽度定义为100％，然后将div的高度也定义为100％”，但这对我没有起作用。我不想为地图定义固定像素高度，因为那样它就不能以响应式的方式适应窗口的宽度。

目前我有：

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>
          [e-mail]</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代码中看到的起始模板是因为我正在使用一个起始Bootstrap模板。虽然我不认为它会影响这个高度问题 :)

我的代码创建了这个:

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

肯定有一种简单的方法来处理这个问题，但由于某些原因，我的大脑不愿意与我合作。非常感谢您的所有帮助 :)

Joanna

- jonsbaa

Answer 1

也许像这样？希望能有所帮助！ 工作代码链接: https://jsfiddle.net/jxfw0r16/8/ 基本上我已经修改了你的 CSS 中的 .contact 和 #map。

<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>
      [e-mail]</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>

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

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

.contact {
  position: relative;
  width: 49%;
  height: 0;
  display: inline-block;
  padding-bottom: 60%;
}

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

#map {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}

- this.user3272243

---

#map和.contact在CSS中进行了更改，它们需要各自具有特定的位置以及其他小的修复。 - this.user3272243

位置变化和其他小修复是什么，它们各自如何有助于回答问题？ - Toni Leigh

给.contact div设置零高度和百分比底部内边距，然后底部内边距是容器宽度的百分比，为了纵横比的原因，div容器必须是相对定位的，而iframe则是绝对定位的，因此它在高度为0的情况下显示在内部。 - this.user3272243

@jonsbaa 很抱歉回复晚了，看看这个链接，我认为它可以解决你的高度问题：https://jsfiddle.net/jxfw0r16/13/ 基本上，我将联系人的iframe类更改为contact2，并且去掉了height: 0%; 另外，我还更改了basic-container的高度，以便您可以看到它正常工作。 - this.user3272243

嗯，让我来看看。 - this.user3272243

Answer 2

你可以尝试这个。查看此链接：https://jsfiddle.net/c287hgpc/。

      <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>
              <p>[phone]<br>
              [e-mail]</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 {
  margin: 0 auto;
  text-align: justify;
  width: 100%;
}

.contact {
  float: left;
  height: 100%;
  padding: 2%;
  width: 46%;
}

.contact p.lead {
  text-align: left;
}
.starter-template h2 {
  text-align: center;
}
#map {
  height: 100%;
  width: 100%;
}

- Anandh Sp

---

文本和 iframe 完全不符合 .第三个 div 是包装器，更不用说地图的高度仍然与上面给出的示例相同。 - this.user3272243

正如@user3272243所说，这并不起作用。地图的高度仍然存在与之前相同的问题，文本和地图也不在它们原来的位置上。 - jonsbaa