这是我的页脚代码,如何让它显示在页面底部而不是在我上面的内容下面呢？
/*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.
