沒有填滿頁面的其餘部分

-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鏈接到屏幕截圖 –

沒有填滿頁面的其餘部分

回答

相關問題