Question

我网站的网页布局如下：

<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;}

所有元素在布局上看起来都很好。然而，问题是当容器的高度较小时，页脚元件粘在容器下方并且不会停留在页脚位置。同样，如果我手动将高度修改为600px以使其看起来像页脚，则在浏览器调整大小时，页脚仍然会粘在容器下方，看起来不像页脚。

如何解决这个问题？

Answer 1

为页脚使用固定位置。

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 */
}

从主容器中分离页脚

1 个答案: