上面固定，左侧固定，右侧内容可滚动

最新推荐文章于 2023-08-13 09:34:53 发布

大厂女程序媛

最新推荐文章于 2023-08-13 09:34:53 发布

阅读量7.9k

点赞数

分类专栏：基础布局

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

版权

基础布局专栏收录该内容

2 篇文章 0 订阅

订阅专栏

  
  
   
   
    
    <!DOCTYPE html>
   
   
   
   
    
    <html lang="en">
   
   
   
   
    
    <head>
   
   
   
   
    
    	<meta charset="UTF-8">
   
   
   
   
    
    	<title>上面固定，左侧固定，右侧内容可滚动</title>
   
   
   
   
    
    	<style type="text/css">
   
   
   
   
    
    		*{margin:0; padding:0;}
   
   
   
   
    
    		html,body{overflow:hidden;width:100%; height:100%;}
   
   
   
   
    
    		.top{width:100%; height:30px; background:#00f;}
   
   
   
   
    
    		.con{position: relative; width:100%; height:100%;}
   
   
   
   
    
    		.left,.right{position: absolute;top:0; bottom:0;_height:100%;}
   
   
   
   
    
    		.left{width:222px;left:0;background:#eee;}
   
   
   
   
    
    		.right{left:0;right:0;margin-left:222px; background:#999;_width:100%}
   
   
   
   
    
     
   
   
   
   
    
     
   
   
   
   
    
    		/* 这个相当于iframe自己滚动条 */
   
   
   
   
    
    		.test{width:40px;height:40px; overflow:auto;}
   
   
   
   
    
    	</style>	
   
   
   
   
    
    </head>
   
   
   
   
    
    <body>
   
   
   
   
    
    	<div class="top">头部</div>
   
   
   
   
    
    	<div class="con">
   
   
   
   
    
    		<div class="left">左侧</div>
   
   
   
   
    
    		<div class="right"><div class="test">右侧喜羊羊5号胶篮球18000积分我要兑换喜羊羊全闪蛙式车（蓝色）108000积分我要兑换喜羊羊全闪蛙式车（粉色）右侧喜羊羊5号胶篮球18000积分我要兑换喜羊羊全闪蛙式车（蓝色）108000积分我要兑换喜羊羊全闪蛙式车（粉色）右侧喜羊羊5号胶篮球18000积分我要兑换喜羊羊全闪蛙式车（蓝色）108000积分我要兑换喜羊羊全闪蛙式车（粉色）</div>
   
   
   
   
    
    		</div>
   
   
   
   
    
    	</div>
   
   
   
   
    
    </body>
   
   
   
   
    
    </html>

大厂女程序媛

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
上面固定，左侧固定，右侧内容可滚动

lang="en"> charset="UTF-8"> 上面固定，左侧固定，右侧内容可滚动 type="text/css"> *{margin:0; padding:0;} html,body{overflow:hidden;width:100%; height:100%;} .top{width:100%; height:30px; background:#00f;} .con{po
复制链接

扫一扫