css中position:fixed;是就用来固定的,但IE6不支持,下面方法是在同事那拿来的,还挺好用。因为用到hack和expression,
body,div{ margin:0; padding:0; color:#333;}
.main{ width:960px; height:1000px; margin:0 auto; padding-top:300px; text-align:center;}
.fixbar{position:fixed; width:100%; height:23px;padding-top:8px;bottom:0;left:0;border-top:4px solid #09C; overflow:hidden;}
.fixbar-wrap{width:960px;margin:0 auto}
* html,* html body /* 修正IE6振动bug */{background-image:url(about:blank);background-attachment:fixed;}
*html .fixbar{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}
*html .fixbar{position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft));}
<div class="main">这是主题内容</div>
<div class="fixbar">
<div class="fixbar-wrap">这是底部的内容</div>
</div>
还有个完美绝对底部的方法,
<style type="text/css">
html, body, #wrap {height: 100%;}
body > #wrap {height: auto; min-height: 100%;}
#main {padding-bottom: 150px;}/* 必须使用和footer相同的高度 */
#footer {position: relative;margin-top: -150px; /* footer高度的负值 */height: 150px; clear:both;}
</style>
<div id="wrap">
<div id="main" class="clearfix">
<div id="content">
</div>
<div id="side">
</div>
</div>
</div>
<div id="footer">
</div>
用这个布局的前提,就是footer要在总的div容器之外,footer使用一个层,其它所有内容使用一个总的层。
需要注意的就是#main的padding值、footer的高度和负margin值,需要保持一致。