Definizione dell'altezza percentuale per div (CSS) con elemento Google Maps

Question

Sto cercando di creare una sezione "Contatto" per il mio sito Web, dove avrei il testo sul lato sinistro e un elemento di Google Maps sul lato destro per mostra la nostra posizione Al momento sono riuscito a ottenere i div uno vicino all'altro, ma il problema è che non riesco a ottenere l'altezza della mappa per abbinarla al div vicino ad esso. Ho esaminato altre domande ed esempi e la risposta più popolare sembra essere "aggiungi un wrapper e definisci la sua altezza e larghezza al 100% e poi definisci l'altezza del div al 100%," ma questo non ha funzionato me. Non voglio definire un'altezza fissa di px per la mappa, poiché non si adatterà alla larghezza della finestra in modo reattivo.

Al momento ho:

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> 

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

Lo starter-modello visto nel codice HTML è lì a causa di un antipasto modello Bootstrap I sto usando. Non credo che questo problema riguarda l'altezza, però :)

Il codice che ho crea questo:

E quello che mi piacerebbe avere è questo (ho raggiunto questo demo aggiungendo un valore px fisso per l'altezza della mappa):

ci deve essere un modo semplice per gestire questa situazione, ma per qualche motivo il mio cervello non vuole collaborare con me su questo. Ogni aiuto è molto apprezzato :)

Joanna

Answer 1

Forse qualcosa di simile? Spero che sia d'aiuto!

lavoro Link Codice: https://jsfiddle.net/jxfw0r16/8/

Fondamentalmente ho cambiato .contact e #Map del vostro CSS.

<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

Si può provare questo controllare questo link. 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> 

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