身体/容器背景不填充屏幕的高度
问题描述:
新手开发人员,真的很沮丧,并在栈上找到答案,但还没有找到!身体/容器背景不填充屏幕的高度
我这里有一个网站:https://andymay101.github.io/emilyandywedding/ 代码是在这里。有一个带有5个菜单项导航的正文背景图片的div容器。
,当我在浏览器中调整我的平板电脑/台式机上,但是,当我浏览到手机上有空白的空间,整个网站没有调整到适合看起来不错。已经尝试添加最小高度100%至身体,
产品图附,任何意见理解! mobile screengrab of website index
答
您可以设置min-height: calc(100vh - 302px);
到.container
,它会采取屏幕高度减去302px
(垂直内边距,页眉和页脚的高度之和)的100%。
答
添加这两个元标记以及小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>
这是因为页面内容是不够的,它填平所以页脚不留在页面的底部。您看到的白色部分是'
'标签的背景颜色。有几种方法可以解决这个问题,但这取决于你想怎么做。对于一个非常快速的hacky方法,你可以使用'.container {0}最低高度:80vh; '如果你想以一种不太古怪的方式来做,你需要在你的页面上添加一些脚本。 –