兼容IE的 position:fixed

最新推荐文章于 2021-06-08 10:34:03 发布

iteye_12132

最新推荐文章于 2021-06-08 10:34:03 发布

阅读量162

点赞数

分类专栏： CSS 文章标签： IE Firefox HTML XHTML

本文链接：https://blog.csdn.net/iteye_12132/article/details/82075450

版权

CSS 专栏收录该内容

35 篇文章 0 订阅

订阅专栏



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title></title>  

<style type="text/css">  
    html,body{margin:0px;height:100%;overflow:hidden;font-size:12px;}  

    /* the core */  
    #wrapper{  
        position:relative;  
        width:100%;  
        height:100%;  
        overflow:auto; 

    }  
    #container{
    	width: 90%;
    	background-color:#ccc;
        margin:0 auto;  
    }
    .fixed-box{  
         position:fixed;  
    }  
    * html .fixed-box{  
        position:absolute;  
        z-index:100;      
    }  

      /* the sample */  
    #topBox, #leftBox, #bottomBox{  
         padding:5px;  
         border:1px solid #aaa;  
         background-color:#fee;  
         font-size:12px;  
    }  

    #topBox{  
         width:100px;  
         left:120px;  
         top:120px;     
    }  

    #leftBox{  
        width:150px;  
        left:50%;  
        top:180px;  
        /*margin:0 0 0 -370px;*/      
    }  

    #bottomBox{  
        width:100%;  
        left:0px;  
        bottom:0px;   
    }  

</style>  

</head>  

<body>  
    <div id="wrapper">  
        <div id="container">    
          <div >  
             <p>一段内容</p>  
              <p>一段内容</p>     
               <p>一段内容</p>    
                <p>一段内容</p>  
               <p>一段内容</p>  
              <p>一段内容</p>     
              <p>一段内容</p>     
              <p>一段内容</p>     
              <p>一段内容</p>     
              <p>一段内容</p>     
              <div style="height:500px;background-color:lightblue;"> <p>一段内容(高度500px)</p></div>
               <p>一段内容</p>    
                <p>一段内容</p>   
                <p>一段内容</p>   
                <p>一段内容</p>       
                <p>一段内容</p>   
                <p>一段内容</p>   
                <p>一段内容 over</p>   
          </div>  
         </div>     
    </div>  

    <div id="topBox" class="fixed-box">  
        <p><b>Top Fixed Position</b></p>  
         <p>  
               The ie6 "fixed" position is the same to Firefox etc. position:fixed 。      
         </p>   
    </div>  

    <div id="leftBox" class="fixed-box">  
         <p><b>Left Fixed Position</b></p>  
         <p>  
              The ie6 "fixed" position is the same to Firefox etc. position:fixed 。   
         </p>   
    </div>  
    <div id="bottomBox" class="fixed-box">  
         <p><b>Bottom Fixed Position</b></p>  
         <p>  
               The ie6 "fixed" position is the same to Firefox etc. position:fixed 。      
         </p>   
    </div>  
</body>  
</html>

iteye_12132

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
兼容IE的 position:fixed

[code="html"] html,body{margin:0px;height:100%;overflow:hidden;font-size:12px;} /* the core */ #wrapper{ position:relative; ...
复制链接

扫一扫