Div not filling up the rest of the page - html

Question

What seems to be an easy HTML page and CSS set up I have come up to an issue. I am trying to make a DIV fill up the rest of the page and meet with the DIV at the bottom.
I have researched all through the web and tried many options I have come across.
It seems the most popular way is to use position:absolute but when I do that my Google map disappears. It will also not let me change the position of the Google Map DIV from relative.
At the moment it is displaying as you can see from my image. I would like the #map DIV to center and fill up the remainder of the space available.
My site in Chrome element view
My HTML code:
<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>
My CSS code:
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

Try using flexbox instead.
https://css-tricks.com/centering-css-complete-guide/
<div style="display:flex;justify-content:center;align-items:center;">
<div></div>
</div>

Answer 2

Try this CSS code on the #map, it will makes your map full width and height of the page :
#map {
display: block;
width: 100%;
height: 100%;
}
Fiddle