Question

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

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

当我在平板电脑/台式机上的浏览器中调整大小时看起来很好但是当我在移动设备上导航时有空白空白并且整个网站没有调整大小以适应。已经尝试将min-height 100％添加到body，

Pic附加，任何建议表示赞赏！ mobile screengrab of website index

Answer 1

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

Answer 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>

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

2 个答案: