身體/容器背景不填充屏幕的高度

新手開發人員，真的很沮喪，並在棧上找到答案，但還沒有找到！身體/容器背景不填充屏幕的高度

我這裏有一個網站：https://andymay101.github.io/emilyandywedding/ 代碼是在這裏。有一個帶有5個菜單項導航的正文背景圖片的div容器。

，當我在瀏覽器中調整我的平板電腦/臺式機上，但是，當我瀏覽到手機上有空白的空間，整個網站沒有調整到適合看起來不錯。已經嘗試添加最小高度100％至身體，

產品圖附，任何意見理解！ mobile screengrab of website index

2017-09-23 Andy May

這是因爲頁面內容是不夠的，它填平所以頁腳不留在頁面的底部。您看到的白色部分是''標籤的背景顏色。有幾種方法可以解決這個問題，但這取決於你想怎麼做。對於一個非常快速的hacky方法，你可以使用'.container {0}最低高度：80vh; '如果你想以一種不太古怪的方式來做，你需要在你的頁面上添加一些腳本。 –

您可以設置min-height: calc(100vh - 302px);到.container，它會採取屏幕高度減去302px（垂直內邊距，頁眉和頁腳的高度之和）的100％。

來源

2017-09-23 15:06:47

添加這兩個元標記以及小css。

<meta http-equiv="X-UA-Compatible" content="IE=edge"/> 
<meta name="viewport" content="width=device-width, height=device-height initial-scale=1"/>

.container { 
 
    height:100%; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
\t <meta http-equiv="X-UA-Compatible" content="IE=edge"/> 
 
    <meta name="viewport" content="width=device-width, height=device-height initial-scale=1"/> 
 
\t 
 
    <title>Andy and Emily's wedding</title> 
 
    <link href="https://andymay101.github.io/emilyandywedding/resources/css/style.css" type="text/css" rel="stylesheet"></link> 
 
    </head> 
 
    <body> 
 
    <header> 
 
     <div class=headerimg> 
 
     <span class=headertext>Andy and Emily's wedding</span> 
 
     </div> 
 
    </header> 
 
    <div class="container"> 
 
     <div class=box> 
 
      <span class"boxtext"><a href="venuedetails.html" target="_blank">Venue details</a></span> 
 
     </div> 
 
     <div class=box> 
 
      <span class"boxtext"><a href="RSVP&accomodation.html" target="_blank">RSVP and accomodation</a></span> 
 
     </div> 
 
     <div class=box> 
 
      <span class"boxtext"><a href="www.codeacademy.com">Wedding gifts</a></span> 
 
     </div> 
 
     <div class=box> 
 
      <span class"boxtext"><a href="www.codeacademy.com">Suggestions box</a></span> 
 
     </div> 
 
     <div class=box> 
 
      <span class"boxtext"><a href="Pictures.html" target="_blank">Pictures</a></span> 
 
     </div> 
 
    </div> 
 
    <footer> 
 
    </footer> 
 

 
    </body> 
 
</html>

來源

2017-09-23 16:06:26 Aashish

身體/容器背景不填充屏幕的高度

回答

相關問題