Div не заполняет остальную страницу

Question

Что-то вроде простой HTML-страницы и CSS-настройки, я столкнулся с проблемой. Я пытаюсь сделать DIV, заполнить остальную часть страницы и встретиться с DIV внизу.

Я исследовал все через Интернет и попробовал множество вариантов, с которыми я столкнулся. Кажется, самый популярный способ - использовать положение: абсолютное, но когда я это сделаю, моя карта Google исчезнет. Это также не позволит мне изменить положение DIV от Google.

В настоящее время он отображен, как видите на картинке. Я хотел бы, чтобы #map DIV центрировался и заполнил оставшуюся часть доступного пространства.

My site in Chrome element view

Мой HTML-код:

<div id="wrapper"> 
    <div id="header"> 
     <h1>Find a Car Park</h1> 
    </div> 
    <div id="section"> 
     <input type="text" id="town" placeholder="Search for Town.." onkeypress="handle(event)" /> 
     <input type="button" value="Find Car Parks" onclick="codeAddress()" /> 
     <input type="button" value="View All" onclick="getAllCarParks()" /> 
     <input type="button" value="Your Location" onclick="loadUserScript()" /> 
    </div> 
    <div id="map"> 

     <div id="googleMap"> 

     </div> 
    </div> 


    <div id="footer"> 
     <p>hello</p> 
    </div> 
</div> 


</body> 

Мой CSS код:

body{ 
margin:0; 
font-family: 'Cabin', sans-serif; 
} 
#header { 
background-color:#2d89ef; 
color:white; 
text-align:center; 
padding: 20px; 

} 
#wrapper{ 
position:absolute; 
height:100vh; 
width:100vw; 

} 
#section { 
text-align:center; 
padding-bottom:15px; 
padding-top:15px; 
width:100vw; 
} 
#footer { 
background-color:#2c3e50; 
color:white; 
clear:both; 
text-align:center; 
padding-top:10px; 
padding-bottom:10px; 
bottom:0; 
position:absolute; 
width:100vw; 
} 

#map { 
height:auto; 
} 

#googleMap{ 
height:65%; 
} 

input[type=button], input[type=submit], input[type=reset] { 
background-color: #2d89ef; 
border: none; 
color: white; 
padding: 16px 32px; 
text-decoration: none; 
margin: 4px 2px; 
cursor: pointer; 
border-radius: 4px; 
} 
input[type=text] { 
box-sizing: border-box; 
border: 2px solid #ccc; 
border-radius: 4px; 
font-size: 16px; 
color: darkgrey; 
background-color: white; 
background-image: url('../images/searchicon.png'); 
background-position: 10px 10px; 
background-repeat: no-repeat; 
padding: 12px 20px 12px 40px; 
} 

Answer 1

Попробуйте использовать Flexbox вместо этого.

https://css-tricks.com/centering-css-complete-guide/

<div style="display:flex;justify-content:center;align-items:center;"> 
    <div></div> 
</div> 

Answer 2

Попробуйте CSS код на #map, он будет делает вашу карту всю ширину и высоту страницы:

#map { 
    display: block; 
    width: 100%; 
    height: 100%; 
} 

Fiddle