HTML5网页设计

html_css

CSS实现网页底部固定浮动层

时间:2012-09-26 16:03来自:网络作者:未知点击:
CSS样式部分: body{ background-image : url (about:blank); background-attachment : fixed ; }

CSS样式部分:

  1. body {  
  2.     background-image:url(about:blank);  
  3.     background-attachment:fixed;  
  4. }  
  5. #footer {  
  6.     width:100%;  
  7.     background:#096;  
  8.     z-index:999;  
  9.     position:fixed;  
  10.     bottom:0;  
  11.     left:0;  
  12.     _position:absolute;  
  13.     _top: expression_r(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight);  
  14.     overflow:visible;  

HTML部分id为 #footer 的DIV即为固定浮动层:
 <div id=footer>固定漂浮内容</div>
再看看这些需要注意的地方:
 _top: expression_r(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight);
看到 _top 大家都知道是为IE6独家准备的,但是当我只加了上面这句时,IE6下拉动滚动条看到的这个漂浮物是抖动的
解决方法我们为IE6添加这样一条语句:
 background-image:url(about:blank);
 background-attachment:fixed;
注意:如果body本身有背景图片,就无需添加“background-image:url(about:blank);”,如此一来我们就解决了IE6下的抖动问题。

当前文章地址:http://www.shejicool.com/web/html_css/345.html

阅完本篇文章?您还可以: 收藏本文 文章挑错 朋友推荐