0

我的网站的网页布局如下所示：

我的网站的网页布局如下所示：

<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 以使其看起来像页脚，则在浏览器调整大小时，页脚仍然粘在容器下方并且看起来不像页脚。

我该如何纠正这个问题？

4

1 回答 1

1

为您的页脚使用固定位置。

div.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: 50px; /* change this as needed */
}

并为你的 body 指定一个底部填充，以确保滚动时所有内容都可见。

body {
    padding-bottom: 50px; /* change this to the max-height given for your footer */
}
于 2012-08-15T09:52:21.620 回答