CSS固定顶底之一

最新推荐文章于 2023-11-01 16:48:56 发布

xuyf

最新推荐文章于 2023-11-01 16:48:56 发布

阅读量739

点赞数 1

分类专栏：网络及网页编程

网络及网页编程专栏收录该内容

28 篇文章 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>IE下的纯CSS完美position:fixed实现方案</title>


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


/* 核心样式定义 */
.wrapper{
    position:relative;
    width:100%;
    height:100%;
    overflow:auto; 
}
.fixed-box{
    position:fixed;
}
* html .fixed-box{
    position:absolute;
    z-index:100; 
}


/* 使用例子 */


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


#topBox{
    width:100%;
    left:0px;
    top:0px; 
}


#leftBox{
    width:150px;
    left:50%;
    top:150px;
    margin:0 0 0 -200px; 
}


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


</style>


</head>


<body>
<div class="wrapper">


    <div style="height:2000px;">
        <p>一段内容</p>
        <p>一段内容</p> 
        <p>一段内容</p> 
        <p>一段内容</p>
        <p>一段内容</p>
        <p>一段内容</p> 
        <p>一段内容</p> 
        <p>一段内容</p> 
        <p>一段内容</p> 
        <p>一段内容</p> 
        <p>一段内容</p> 
        <p>一段内容</p> 
        <p>一段内容</p> 
        <p>一段内容</p>  
        <p>一段内容</p> 
        <p>一段内容</p> 
        <p>一段内容</p> 
    </div>


</div>


<div id="topBox" class="fixed-box">
    <p><b>固定在顶部</b></p>
    <p>
    该解决方案完美实现了 position:fixed 效果，完美支持 ie5.5+, firefox, opera, chrome等主流浏览器。
    </p> 
</div>


<div id="leftBox" class="fixed-box">
    <p><b>固定中间某个位置</b></p>
    <p>
    该解决方案完美实现了 position:fixed 效果，完美支持 ie5.5+, firefox, opera, chrome等主流浏览器。
    </p> 
</div>


<div id="bottomBox" class="fixed-box">
    <p><b>固定在底部</b></p>
    <p>
    该解决方案完美实现了 position:fixed 效果，完美支持 ie5.5+, firefox, opera, chrome等主流浏览器。 
    </p> 
</div>


</body>
</html>