我在安排我的 div 时遇到问题,以便我可以看到没有垂直滚动条的 100% 登陆页面(我不想删除该选项,我只想在开始时有一个 100% 屏幕页面)。
我有一个页眉和页脚在我的容器之外。
这是我的CSS
html {
height: 100%;
font-family: serif;
font-size: 137.5%;
-webkit-font-smoothing: antialiased;
}
body {
font-family: Georgia, "Times New Roman", Times, serif;
height:100%;
margin: 0;
}
.container {
width: 100%;
min-height: 100%;
background-color:#3FC;
}
footer {
text-align: center;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
这里有两张图片可以说明问题所在。容器是绿色的,页脚有 3 种颜色,所有这些都是为了查看我更改内容时实际发生的情况。如您所见,页脚未显示在第一张图片中,但粘在第二张图片的底部。我想删除容器中的这个额外空间。
更新:已解决? 你好!经过几个小时的搜索示例并尝试应用于我的元素后,我刚刚尝试了一些东西,但它没有用。现在,请告诉我这在某种程度上是否是一个大禁忌,但它奏效了,我很高兴我能够自己做到。
我所做的是为页脚和页眉 div 设置高度。然后在我的容器 div 中设置 min-height: calc(100% - totalheightvalueofbothdivs);
瞧,它起作用了。我试着放大和缩小,但仍然很好。将继续在不同的浏览器等中进行故障排除。
现在我有:
<header>
<container>
<footer>
我在想在页脚/页眉上设置高度可能不好?但我不需要这样做,因为我知道它们有多大,可以只使用 calc() 并且不要将它们设置在页脚/页眉中。
最佳答案
请确定您是否需要单页应用程序。在那种情况下,您的页眉和页脚将具有固定的高度,并且您的容器将覆盖碎石的其余空间。这是你想要的吗?请看下面的代码:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
.mainWrap {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
}
.headerMain {
position: absolute;
width: 100%;
top: 0px;
left: 0px;
height: 50px;
border-bottom: 1px solid #000;
background: #fff;
z-index: 2;
}
.sectionMain {
position: absolute;
height: 100%;
background: #efefef;
width: 100%;
padding: 50px 0px;
box-sizing: border-box;
z-index: 1;
}
.footerMain {
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 50px;
border-top: 1px solid #000;
background: #fff;
z-index: 1;
}
</style>
<body>
<div class="mainWrap">
<header class="headerMain">Test Header</header>
<section class="sectionMain">Test Body</section>
<footer class="footerMain">Test Footer</footer>
</div>
</body>
</html>
关于Wordpress CSS 排列 div : container/footer to get a 100% landing page,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42717178/