zoukankan      html  css  js  c++  java
  • 用css固定div层在页面顶部和底部(兼容IE6)

    这是关于实现css固定div层在页面顶部,css固定div层在页面底部的代码,兼容IE6

    有时需要把一个元素固定在页面的某个部位,一般的解决方法是:

    <div class="box"></div>

    .box{position:fixed;bottom:0;right:10px;}

    让元素固定在浏览器的底部和距离右边的10个像素。一般的浏览器都支持这种方法,但是ie6不支持fixed

    解决办法:

    .box{

    osition:fixed;
    _position:absolute;
    bottom:0;
    right:10px;
    _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)))

    } 

    使元素固定在浏览器的顶部:

    .box{
    _position:absolute;
    _bottom:auto;
    _top:expression(eval(document.documentElement.scrollTop));
    }

    使元素固定在浏览器的底部:

    .box{
    _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)));
    }

    这两段代码只能实现在最底部跟最顶部,你可以使用 _margin-top:10px; 或者_margin-bottom:10px; 修改其中的数值控制元素的位置。

    在ie中你会发现被固定定位的元素在滚动滚动条的时候会闪动

    解决的方法是:

    *html{

    background-image:url(about:blank);  /*使用空背景*/

    background-attachment:fixed;  /*固定背景*/

    }

    这样ie6中不支持fixed问题算是解决了。

  • 相关阅读:
    配置变量的信息
    Smarty保留变量信息
    选择排序
    java.utils.HashMap数据结构分析
    HashMap的工作原理
    Dubbo
    五种单例模式:
    Redis的持久化机制包括RBD和AOF两种,对于这两种持久化方式各有优势
    Zookeeper要安装在奇数个节点,但是为什么?
    Redis搭建多台哨兵
  • 原文地址:https://www.cnblogs.com/yangjinjin/p/3045115.html
Copyright © 2011-2022 走看看