【css】上下2个固定在视图中，中间自适应布局

最新推荐文章于 2022-07-28 15:27:53 发布

dengzhan6765

最新推荐文章于 2022-07-28 15:27:53 发布

阅读量207

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/iisoc/archive/2013/02/01/ic_css.html

版权

有人想要个兼容布局：

原本以为通过postion:fixed 来实现，但是ie 6 不支持这个属性，只能通过一条Internet Explorer的CSS表达式(expression)来解决。

但是css表达式的性能不行，所以就想到用js实现。网页加载的时候，改变浏览器大小的时候，滚动的时候，改变div的top值。

代码如下：

View Code

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
 5     <title></title>
 6     <script type="text/javascript">
 7 
 8      window.onscroll = window.onresize = window.onload =function (){
 9         var div1 = document.getElementById('div1')
10         var div2 = document.getElementById('div2')
11         setScrollSize(div1, div2)
12 
13         
14     }
15         function setScrollSize(div1,div2){
16             var sHeight = document.documentElement.scrollTop || document.body.scrollTop;
17             var oHeight = document.documentElement.clientHeight || document.body.clientHeight;
18                 oHeight += (sHeight -100);    //这个100是他本身的高度
19             div1.style.top = sHeight + 'px';
20             div2.style.top = oHeight + 'px';
21         }
22     </script>
23     <style type="text/css">
24     html, body{position: relative; height: 100%;}
25     *{margin: 0; padding:0;}
26     #div1{position: absolute; top: 0; left: 0; background: red; height: 100px; width: 100%; z-index: 3}
27     #div2{position: absolute; bottom: 0; left: 0; background: red; height: 100px;width: 100%; z-index: 3}
28 
29     #div3{position: absolute; top: 0; border: 1px solid #000; height:100%; width: 100%; z-index: 1; }
30     #div4{position: absolute; height: 100%; background: green; width: 100%; padding: 100px 0; height: 2000px; z-index: 1}
31     </style>
32 </head>
33 <body>
34         
35         <div id="div1"></div>
36         <div id="div2"></div>
37         <div id="div3">
38             <div id="div4">xdwadawdw</div>
39         </div>
40 </body>
41 </html>

<!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" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title></title> <script type="text/javascript"> window.onscroll = window.onresize = window.onload =function (){ var div1 = document.getElementById('div1') var div2 = document.getElementById('div2') setScrollSize(div1, div2) } function setScrollSize(div1,div2){ var sHeight = document.documentElement.scrollTop || document.body.scrollTop; var oHeight = document.documentElement.clientHeight || document.body.clientHeight; oHeight += (sHeight -100); //这个100是他本身的高度 div1.style.top = sHeight + 'px'; div2.style.top = oHeight + 'px'; } </script> <style type="text/css"> html, body{position: relative; height: 100%;} *{margin: 0; padding:0;} #div1{position: absolute; top: 0; left: 0; background: red; height: 100px; width: 100%; z-index: 3} #div2{position: absolute; bottom: 0; left: 0; background: red; height: 100px;width: 100%; z-index: 3} #div3{position: absolute; top: 0; border: 1px solid #000; height:100%; width: 100%; z-index: 1; } #div4{position: absolute; height: 100%; background: green; width: 100%; padding: 100px 0; height: 2000px; z-index: 1} </style> </head> <body> <div id="div1"></div> <div id="div2"></div> <div id="div3"> <div id="div4">xdwadawdw</div> </div> </body> </html>

window.onscorll滚动的时候不够平滑，可以考虑用缓冲运动。

转载于:https://www.cnblogs.com/iisoc/archive/2013/02/01/ic_css.html

dengzhan6765

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【css】上下2个固定在视图中，中间自适应布局

有人想要个兼容布局：原本以为通过postion:fixed 来实现，但是ie 6 不支持这个属性，只能通过一条Internet Explorer的CSS表达式(expression)来解决。但是css表达式的性能不行，所以就想到用js实现。网页加载的时候，改变浏览器大小的时候，滚动的时候，改变div的top值。代码如下：View Code 1 <!D...
复制链接

扫一扫