我网站的网页布局如下所示:
我网站的网页布局如下所示:
<body>
<div class="container">
<div class="sidebar">
</div>
<div class="content">
</div>
</div>
<div class="pre-footer">
</div>
<div class="footer">
</div>
</body>
CSS:
body {background:#eaeaea url('../images/bg/sfere.jpg') no-repeat top center fixed;}
.footer {float:left;width:100%;height:67px;background:url('../images/bottom.png') bottom center;bottom:0px;left:0px;}
.container{padding-top:5px;margin-left:100px;margin-right:auto;}
.sidebar {float:left;width:220px;min-height:610px;text-align:center;}
.home {margin:178px 0 0 100px;padding:0 10px 0px 10px;width:800px;float:left;}
.pre-footer {float:left;width:98%;height:100px;position:relative;background:url('../images/pre-footer.png') bottom center;left:15px;bottom:-32px;}
所有元素的布局都很好。然而，问题是当容器的高度较小时，页脚元素会粘在容器下方并且不会停留在页脚位置。同样，如果我手动将高度固定为 600 像素以使其看起来像页脚，则在浏览器调整大小时，页脚仍然贴在容器下方并且看起来不像页脚。
如何解决这个问题？
最佳答案
为页脚使用固定位置。
div.footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
max-height: 50px; /* change this as needed */
}
并为您的正文指定底部填充，以确保滚动时所有内容都可见。
body {
padding-bottom: 50px; /* change this to the max-height given for your footer */
}
关于html - 从主容器中分离页脚，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11967207/