Xác định chiều cao phần trăm cho div (CSS) bằng phần tử Google Maps

Question

Tôi đang cố gắng tạo phần "Liên hệ" cho trang web của mình, nơi tôi có văn bản ở bên trái và phần tử Google Maps ở bên phải hiển thị vị trí của chúng tôi. Tại thời điểm này, tôi đã cố gắng để có được các divs bên cạnh nhau, nhưng vấn đề là tôi dường như không thể có được chiều cao của bản đồ để phù hợp với div bên cạnh nó. Tôi đã xem xét các câu hỏi và ví dụ khác và câu trả lời phổ biến nhất có vẻ là "thêm trình bao bọc và xác định chiều cao và chiều rộng của nó thành 100% và sau đó xác định chiều cao của div thành 100%", nhưng điều này không hiệu quả tôi. Tôi không muốn xác định chiều cao px cố định cho bản đồ, vì nó sẽ không thích ứng với chiều rộng của cửa sổ theo cách phản hồi.

Tại thời điểm này tôi có:

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> 

Và 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%; 
} 

Starter-template thấy trong mã HTML là có vì một khởi động Bootstrap mẫu tôi đang sử dụng. Tôi không tin rằng nó ảnh hưởng đến vấn đề chiều cao này, mặc dù :)

Mã Tôi có tạo này:

Và những gì tôi muốn có điều này là (tôi đã đạt được điều này bằng cách giới thiệu thêm một giá trị cố định px cho chiều cao của bản đồ):

phải có một cách đơn giản để xử lý việc này, nhưng đối với một số lý do bộ não của tôi không muốn hợp tác với tôi về điều này. Tất cả trợ giúp đều được đánh giá cao :)

Joanna

Answer 1

Có thể là một cái gì đó như thế này? Hy vọng nó giúp!

đang làm việc liên kết: https://jsfiddle.net/jxfw0r16/8/

Về cơ bản tôi đã thay đổi .contact và #map của css của bạn.

<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

Bạn có thể thử này Kiểm tra liên kết này. 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> 

mã 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%; 
}