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

帆帆资源网

将一个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<span style="background-color: rgb(255, 255, 255); font-weight: 400;">这只是测试内容高度，实际，内容区（中间的div）高度可以无限</span>

复制代码