html – css页脚不显示在页面底部

这是我的页脚代码,如何让它显示在页面底部而不是在我上面的内容下面呢？

/*footer */
#footer .column {
    float: left;
    width: 25%;
}

#footer .column div {
    margin: 5px;
    height: 200px;
    background: #eeeeee;
}

<div id="footer">
    <div class="column"><div></div></div>
    <div class="column"><div></div></div>
    <div class="column"><div></div></div>
    <div class="column"><div></div></div>
</div>

注意：这不需要是固定的页脚

解决方法

有两个主要选择：

>固定页脚 – 页脚始终显示在页面底部
>推脚 – 即使内容未填满窗口,页脚也会被推到页面底部

两者中较容易的是固定页脚.

固定页脚

为了固定页脚,在CSS中将页脚的位置设置为固定位置：固定并将页脚放置在页面底部的底部：0px.这是CSS-Tricks的代码片段.

#footer {
   position:fixed;
   left:0px;
   bottom:0px;
   height:30px;
   width:100%;
   background:#999;
}

/* IE 6 */
* html #footer {
   position:absolute;
   top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}

推脚

推脚有点棘手.这里是a great graphic,显示了当内容不足时页脚没有停留在页面底部的原因：

基本上,问题正在发生,因为页脚元素被“推”在其上方的元素下面,并且该元素的高度不像页面的高度那么长.为了解决这个问题,你需要确保页脚被“推”到页面的整个高度(减去页脚的高度).

这是怎么做的：

HTML

<div id="container">
   <div id="header"></div>
   <div id="body"></div>
   <div id="footer"></div>
</div>

CSS

html,body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}

这里有一个更详细的tutorial on how to do it以及上面代码的来源.

这是来自同一来源的working demo of the code.