正文/容器背景不填充屏幕高度答案

【问题标题】：body / container background does not fill height of screen正文/容器背景不填充屏幕高度
【发布时间】：2017-09-26 03:24:25
【问题描述】：

新手开发者，对此感到非常沮丧，并在堆栈上寻找答案但尚未找到任何答案！

我在这里有一个网站：https://andymay101.github.io/emilyandywedding/ 代码在这里。主体内部有一个带有背景图像的 div 容器，带有 5 个菜单项导航。

当我在平板电脑/台式机上的浏览器中调整大小时看起来不错，但是当我在移动设备上导航时出现空白区域，并且整个网站的大小无法适应。已经尝试将 min-height 100% 添加到 body，

附上图片，不胜感激！ mobile screengrab of website index

【问题讨论】：

发生这种情况是因为页面内容不足以填满它，因此页脚不会停留在页面底部。您看到的白色部分是<body> 标签的背景颜色。有几种方法可以解决这个问题，但这取决于你想怎么做。对于一种非常快速的 hacky 方法，您可以使用 .container { min-height: 80vh; } 如果您想以一种不那么 hacky 的方式进行操作，您需要在页面中添加一些脚本。

标签： css mobile responsive

【解决方案1】：

您可以将min-height: calc(100vh - 302px); 设置为.container，它将是屏幕高度的100% 减去302px（垂直填充、页眉和页脚高度的总和）。

【讨论】：

【解决方案2】：

将这两个元标记与小 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>
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, height=device-height initial-scale=1"/>
	
    <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>

【讨论】：