固定在屏幕底部的层

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值,需要保持一致。




原文地址:https://www.cnblogs.com/bianyuan/p/2356427.html