Question

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

我已经通过网络进行了研究并尝试了很多我遇到过的选项。似乎最流行的方式是使用位置：绝对但是当我这样做时，我的Google地图就会消失。它也不会让我改变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;
}

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

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

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

Fiddle

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

2 个答案: