没有填满页面的其余部分

-1

什么似乎是一个简单的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; 
}

来源

2016-04-25 Joe C

尝试使用Flexbox的替代。

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

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

来源

2016-04-25 17:03:53 Omrii

谢谢，我刚才把这在我的#map div和我的谷歌地图不再显示？ –

尝试在#map这个CSS代码，它将使得页面的地图全宽度和高度：

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

Fiddle

来源

2016-04-25 17:07:47

谢谢，我已经从Jfiddle中精确地复制了你的代码，现在#map div显示过去了页脚？ –

你可以做一个截图吗？ –

http://imgur.com/e07SE50这是一个imgur链接到屏幕截图 –

没有填满页面的其余部分

回答

相关问题