Definieren prozentualer Höhe für div (CSS) mit Google Maps Element

Question

Ich versuche, einen "Kontakt" Abschnitt für meine Website zu erstellen, wo ich Text auf der linken Seite und ein Google Maps Element auf der rechten Seite hätte Zeige unseren Standort. Im Moment habe ich es geschafft, die Divs nebeneinander zu bekommen, aber das Problem ist, dass ich die Höhe der Map nicht so sehen kann, dass sie mit dem Div daneben übereinstimmt. Ich habe mir andere Fragen und Beispiele angeschaut, und die populärste Antwort scheint zu sein: "Fügen Sie einen Wrapper hinzu und definieren Sie seine Höhe und Breite auf 100% und definieren Sie dann auch die Höhe des Divs auf 100%", aber das hat nicht funktioniert mich. Ich möchte keine feste px-Höhe für die Karte definieren, da sie sich dann nicht an die Breite des Fensters anpasst.

Im Moment habe ich:

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> 

und 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%; 
} 

Das Starter-Template im HTML-Code gesehen ist es wegen eines Starters Bootstrap-Vorlage I verwende. Ich glaube nicht, dass diese Höhe Problem betrifft, aber :)

Der Code Ich habe erstellt diese:

Und was ich möchte haben, ist diese (I erreicht diese Demo von einen festen px Wert für die Karte Höhe Zugabe):

Es muss eine einfache Möglichkeit, dies zu handhaben, aber aus irgendeinem Grund mein Gehirn will nicht mit mir zu diesem Thema kooperieren. Jede Hilfe wird sehr geschätzt :)

Joanna

Answer 1

Vielleicht so etwas wie das? Ich hoffe es hilft!

Arbeits Code-Link: https://jsfiddle.net/jxfw0r16/8/

Im Grunde habe ich die .contact und #map Ihrer CSS geändert.

<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> 

.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% 
} 

Answer 2

Sie können versuchen, diese auf diesen Link überprüfen. 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>+358465943409<br> 
       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-Codes

.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%; 
}