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

有人想要个兼容布局：

原本以为通过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>

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

posted @ 2013-02-01 16:39  ic-  阅读(1458)  评论(1)    收藏  举报