Div den Rest der Seite nicht ausfüllen

Question

Was scheint eine einfache HTML-Seite und CSS-Setup zu sein Ich bin auf ein Problem gekommen. Ich versuche einen DIV zu machen, um den Rest der Seite zu füllen und mich mit dem DIV unten zu treffen.

Ich habe über das Internet recherchiert und viele Optionen ausprobiert, die mir begegnet sind. Es scheint die beliebteste Möglichkeit ist, Position: absolute zu verwenden, aber wenn ich das mache, verschwindet meine Google-Karte. Es wird mir auch nicht erlauben, die Position des Google Map DIV von relativ zu ändern.

Im Moment wird angezeigt, wie Sie von meinem Bild sehen können. Ich möchte, dass der #map DIV den Rest des verfügbaren Platzes zentriert und füllt.

My site in Chrome element view

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

Mein 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

Versuchen Flexbox anstelle.

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

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

Answer 2

Versuchen Sie, diese CSS-Code auf dem #map, es wird Ihre Karte in voller Breite und Höhe der Seite macht:

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

Fiddle