您的位置：首页 > Web前端 > CSS

css 兼容 position:fixed

2016-12-16 00:00 120 查看

我是头

我是主体

有多少内容，我就有多高

我是脚

我要随滚动条滚动

我要随滚动条滚动

我要随滚动条滚动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="IE=EmulateIE7" http-equiv="X-UA-Compatible"><!--据说这个可以只需要兼容IE7-->
<title>无标题文档</title>
<style type="text/css"> *{margin:0; padding:0; border:0;} #d{ background:url(images/index_bg.jpg) repeat-y scroll center top transparent; left: 50%; margin-left: -500px; position: relative; width: 1000px;
} .top,.main,.bottom,.fixed{text-align:center;} .top{ background-color:#C30; height: 101px; padding-top: 4px;
} .main{ width:980px; margin:20px auto 0; background-color:#FC0; padding:10px;
} .main .cont{height:900px;} .main .cont .contL,.main .cont .contR{ float:left;
} .main .cont .contL{ width:750px; background-color:#93C; height:900px; margin-right:15px;
} .main .cont .contR{ width:210px; background-color:#33F; height:500px;
} .bottom{ background-color:#00F; clear: both; color: #373737; height: 192px; margin: 10px auto; overflow: hidden; padding-top: 20px; width: 1000px;
} .fixed{ width:190px; line-height:40px; padding-top:20px; padding-bottom:20px; background-color:#999; position:fixed; left:65%; top:160px; z-index:999;/*为了让DIV永远在最前面，不被其他元素遮住*/ _position:absolute;/*这里开始的2句代码是为ie6不兼容position:fixed;而写的*/ _top:expression(eval(document.documentElement.scrollTop+160));/*这里需要获取滚动高度+元素原本的高度*/
}
</style>
</head>

<body>
<div id="d">
<div class="top">我是头</div>
<div class="main"> 我是主体<br /> 有多少内容，我就有多高<br />
<div class="cont">
<div class="contL"></div>
<div class="contR"></div>
</div>
</div>
<div class="bottom">我是脚</div>
</div>
<div class="fixed"> 我要随滚动条滚动<br /> 我要随滚动条滚动<br /> 我要随滚动条滚动<br />
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航