我有以下设置:
标题， 内容 - 需要是浏览器的全高， 和页脚
下面的当前设置是我想要的(当浏览器完全打开时)。基本上内容 div 应该有 100% 的高度，你只需滚动查看页脚。您滚动的量取决于页脚的高度。内容将是一个简单的登录表单。我添加了一个固定高度的 div 来演示我的问题(登录 div 可以是任何高度)。但是问题是当浏览器垂直调整大小时。这是解释起来比较棘手的一点:
我的问题是如何防止页脚与内容 div 重叠？我希望页脚对齐到内容 div 的底部。随着浏览器窗口变短，我希望内容 div 的高度仍保持 100%。浏览器会在内容 div 垂直变短时剪切它(这很好)，但我想要内容 div 下面的页脚并且仍然希望只能滚动到页脚的高度。
我想我在某处缺少 margin-bottom 但不太确定在哪里。有人可以帮忙解决这个问题吗？提前致谢。
html:
<body>
<div class="wrapper">
<div class="content">
<div class="loginPanel">
</div>
</div>
</div>
<div class="footer">
footer, hidden until scrolled
</div>
</body>
CSS:
html, body {
height:100%;
padding:0;
margin:0;
}
.wrapper {
height:100%;
background:orange;
}
.content {
background:grey;
width:100%;
height:100%;
}
.footer {
background:purple;
height:200px;
width:100%;
color:#fff;
}
.loginPanel {
width:600px;
height:300px;
background:green;
margin:0 auto;
}
最佳答案
您应该能够通过以下方式实现您想要的:
html, body {
height:100%;
padding:0;
margin:0;
position:relative;
}
.wrapper {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
}
.content {
background:grey;
width:100%;
min-height:100%;
}
.footer {
height:200px;
width:100%;
}
.loginPanel {
width:600px;
height:300px;
background:green;
margin:0 auto;
}<div class="wrapper">
<div class="content">
<div class="loginPanel"></div>
</div>
<div class="footer">footer, hidden until scrolled</div>
</div>关于html - 带滚动页脚的全高内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29366303/