Div 没有填满页面的其余部分答案

【问题标题】：Div not filling up the rest of the pageDiv 没有填满页面的其余部分
【发布时间】：2016-04-26 01:07:47
【问题描述】：

似乎是一个简单的 HTML 页面和 CSS 设置我遇到了一个问题。我正在尝试让一个 DIV 填满页面的其余部分并与底部的 DIV 会面。

我已经通过网络进行了研究，并尝试了我遇到的许多选项。似乎最流行的方法是使用 position:absolute 但是当我这样做时，我的谷歌地图就会消失。它也不会让我改变 Google Map DIV 的相对位置。

目前它正在显示，正如您从我的图像中看到的那样。我希望#map DIV 居中并填满剩余的可用空间。

我的 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;
}

【问题讨论】：

标签： html css position absolute

【解决方案1】：

尝试使用 flexbox。

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

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

【讨论】：

谢谢，我刚刚把它放在我的#map div 中，我的谷歌地图不再显示？

【解决方案2】：

在#map 上试试这个 CSS 代码，它会让你的地图全宽和全高：

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

Fiddle

【讨论】：

谢谢，我已经从 Jfiddle 复制了您的代码，现在 #map div 显示在页脚之后？
可以截图吗？
你想把页脚粘在底部吗？如果是这样，请尝试固定位置而不是绝对位置：jsfiddle.net/e52792j5/1259