这个的原理是和《在ie6下实现position-fixed的效果》的是一样的。
CSS:
1 <style type="text/css">
2 *{ margin:0; padding:0}
3 html{ height:100%; overflow:hidden}
4 body{height:100%; overflow:hidden; position:relative; font-size:14px;}
5 .duilian01{ position:absolute; width:100px; height:200px; left:50%; top:20px; border:1px solid #666; background:#fc0; margin:0 0 0 -520px}
6 .duilian02{ position:absolute; width:100px; height:200px; left:50%; top:20px; border:1px solid #666; background:#fc0; margin:0 0 0 400px}
7 .budong{ overflow:auto; height:100%;overflow-y:scroll;}
8 .budong-cen{ width:800px; border:1px solid #09F; background:#CCC; margin:0 auto}
9 </style>
2 *{ margin:0; padding:0}
3 html{ height:100%; overflow:hidden}
4 body{height:100%; overflow:hidden; position:relative; font-size:14px;}
5 .duilian01{ position:absolute; width:100px; height:200px; left:50%; top:20px; border:1px solid #666; background:#fc0; margin:0 0 0 -520px}
6 .duilian02{ position:absolute; width:100px; height:200px; left:50%; top:20px; border:1px solid #666; background:#fc0; margin:0 0 0 400px}
7 .budong{ overflow:auto; height:100%;overflow-y:scroll;}
8 .budong-cen{ width:800px; border:1px solid #09F; background:#CCC; margin:0 auto}
9 </style>
HTML:
1 <div class="duilian01">1111111111</div>
2 <div class="duilian02">2222222222</div>
3 <div class="budong">
4 <div class="budong-cen">
5 2222222222<br />2222222222<br />2222222222<br />2222222222<br />2222222222<br />2222222222<br />2222222222<br />2222222222<br />
6 2222222222<br />2222222222<br />2222222222<br />2222222222<br />2222222222<br />2222222222<br />2222222222<br />2222222222<br />
7 2222222222<br />2222222222<br />2222222222<br />2222222222<br />2222222222<br />2222222222<br />2222222222<br />2222222222<br />
8 2222222222<br />2222222222<br />2222222222<br />2222222222<br />2222222222<br />2222222222<br />2222222222<br />2222222222<br />
9 2222222222<br />2222222222<br />2222222222<br />2222222222<br />2222222222<br />2222222222<br />2222222222<br />2222222222<br />
10 2222222222<br />2222222222<br />2222222222<br />2222222222<br />2222222222<br />2222222222<br />2222222222<br />2222222222<br />
11 </div>
12 </div>
13
2 <div class="duilian02">2222222222</div>
3 <div class="budong">
4 <div class="budong-cen">
5 2222222222<br />2222222222<br />2222222222<br />2222222222<br />2222222222<br />2222222222<br />2222222222<br />2222222222<br />
6 2222222222<br />2222222222<br />2222222222<br />2222222222<br />2222222222<br />2222222222<br />2222222222<br />2222222222<br />
7 2222222222<br />2222222222<br />2222222222<br />2222222222<br />2222222222<br />2222222222<br />2222222222<br />2222222222<br />
8 2222222222<br />2222222222<br />2222222222<br />2222222222<br />2222222222<br />2222222222<br />2222222222<br />2222222222<br />
9 2222222222<br />2222222222<br />2222222222<br />2222222222<br />2222222222<br />2222222222<br />2222222222<br />2222222222<br />
10 2222222222<br />2222222222<br />2222222222<br />2222222222<br />2222222222<br />2222222222<br />2222222222<br />2222222222<br />
11 </div>
12 </div>
13