头部和底部固定，中间内容可滚动

最新推荐文章于 2022-08-24 09:53:39 发布

大厂女程序媛

最新推荐文章于 2022-08-24 09:53:39 发布

阅读量7.4k

点赞数 1

分类专栏：基础布局

本文链接：https://blog.csdn.net/tyutjavalily/article/details/50982989

版权

基础布局专栏收录该内容

2 篇文章

订阅专栏

  
  
   
   
    
    html+css的代码的展示
   
   
   
   
    
     
   
   
   
   
    
     
   
   
   
   
    
    <!DOCTYPE html>
   
   
   
   
    
    <html lang="en">
   
   
   
   
    
    <head>
   
   
   
   
    
    	<meta charset="UTF-8">
   
   
   
   
    
    	<title>上下固定，中间内容可以滚动</title>
   
   
   
   
    
    	<style type="text/css">
   
   
   
   
    
    		html,body,.page{width:100%; height:100%;overflow:hidden;}
   
   
   
   
    
    		.top,.con,.bottom{position:absolute; left:0; right:0;}
   
   
   
   
    
    		.top{top:0;z-index:1; height:30px;background:#ff0;}
   
   
   
   
    
    		.con{top:30px; bottom:40px; overflow:auto;}
   
   
   
   
    
    		.bottom{bottom:0;z-index:1; height:40px;background:#00f;}
   
   
   
   
    
     
   
   
   
   
    
    	</style>
   
   
   
   
    
    </head>
   
   
   
   
    
    <body>
   
   
   
   
    
    	<div class="wrap">
   
   
   
   
    
    		<div class="top">头部</div>
   
   
   
   
    
    		<div class="con">中间内容<br/>
   
   
   
   
    
    		中间内容<br/>
   
   
   
   
    
    		中间内容<br/>
   
   
   
   
    
    		中间内容<br/>
   
   
   
   
    
    		中间内容<br/>
   
   
   
   
    
    		中间内容<br/>
   
   
   
   
    
    		中间内容<br/>
   
   
   
   
    
     
   
   
   
   
    
    		</div>
   
   
   
   
    
    		<div class="bottom">底部内容</div>
   
   
   
   
    
    	</div>
   
   
   
   
    
    </body>
   
   
   
   
    
    </html>