将一个DIV固定到顶部一个DIV固定到网页的底部中间放一个DI...

源码资源网

将一个DIV固定到顶部一个DIV固定到网页的底部中间放一个DIV内容超出该DIV范围可以往下拖但是上下DIV不变

1. <style type="text/css">
   
2. body{margin:auto;}
   
3. .top{position:fixed; top:0; left:0; width:100%; height:20px; background:#933;}
   
4. .cn{height:5000px; background:#F9C; margin-top:20px;}
   
5. .foot{position:fixed; bottom:0; left:0; width:100%; height:20px; background:#933;}
   
6. </style>

复制代码

1. <div class="top">
   
2. 顶部固定div
   
3. </div>
   
4. <div class="cn">
   
5. 内容区域<p>
   
6. 内容区域<p>
   
7. 内容区域<p>
   
8. 内容区域<p>
   
9. 内容区域<p>
   
10. 内容区域<p>
    
11. 内容区域<p>
    
12. 内容区域<p>
    
13. 内容区域<p>
    
14. 内容区域<p>
    
15. 内容区域<p>
    
16. </div>
    
17. <div class="foot">
    
18. 底部固定div
    
19. </div>

复制代码

这只是测试内容高度，实际，内容区（中间的div）高度可以无限

• 只需要将对应的顶部和底部的DIV加上样式 position：fixed； 然后顶部的

• 顶部DIV加上css样式：top: 1px; 这个值根据自己的需要自己设置；

  示例代码：<div style="position:fixed; top:1px;">顶部</div>

• 底部DIV加上css样式：bottom : 1px;  这里的值也是根据需求设置；

  示例代码：<div style="position:fixed; bottom :1px;">顶部</div>