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

Posted 2023-03-06

【中文标题】使用 Google Maps 元素定义 div (CSS) 的百分比高度

【英文标题】：Defining percentual height for div (CSS) with Google Maps element

【发布时间】：2015-08-30 19:37:33

【问题描述】：

我正在尝试为我的网站创建一个“联系方式”部分，其中左侧有文本，右侧有一个 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>
          [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 代码中看到的 starter-template 在那里，因为我正在使用一个 starter Bootstrap 模板。不过，我不相信它会影响这个高度问题:)

我创建的代码：

而我想要的是这个（我通过为地图的高度添加一个固定的 px 值来实现这个演示）：

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

乔安娜

【参考方案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%

【讨论】：

#map 和 .contact 在 css 中发生变化的地方，它们需要每个都有一定的位置和其他小修复。

位置变化和其他小修正是什么？它们对回答问题有何贡献？

.contact div 的高度为零，底部填充百分比，然后 padding-bottom 是容器宽度的百分比，因为纵横比的原因，div 容器必须是相对的，iframe绝对的，所以它从高度显示在 0 处。

嗨！感谢您的回答，@ user3272243。这比我的代码效果好一点，但问题是高度真的只有在窗口宽度大约为 670 时才看起来不错。当窗口宽度增长到大约 1200 时，地图的高度比地图的高度大很多它旁边的联系人 div，如下所示：farm4.staticflickr.com/3704/18825732342_70fe7842c0_k.jpg 你知道如何修复它，使其在所有窗口宽度下看起来与左侧联系人 div 对称吗？ :)

@jonsbaa 抱歉回复晚了，看看这个，我想它会解决你的身高问题：jsfiddle.net/jxfw0r16/13 基本上我已经将联系人的 iframe 类更改为 contact2 并摆脱了高度：0%；我还更改了您的基本容器的高度，以便您可以看到它正常工作。

【参考方案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%;

【讨论】：

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

正如@user3272243 所说，这实际上不起作用。地图的高度还是和以前一样的问题，文字和地图不在原来的地方了。