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

新手开发人员，真的很沮丧，并在栈上找到答案，但还没有找到！身体/容器背景不填充屏幕的高度

我这里有一个网站：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

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

回答

相关问题