首页 > 代码库 > 左边固定,右边自适应布局的两种实现

左边固定,右边自适应布局的两种实现

 

html结构:

<body><div class="left"></div><div class="right"></div></body>

 第一种:float实现,左边浮动+右边正常文档流 

	   html,body{	    	width: 100%;	    	height: 100%;	    }      .left{      	float:left;      	width: 300px;      	height: 100%;      	background: red;      }      .right{      	height: 100%;      	background: blue;      }

  

第二种:position定位脱离文档流+margin

	   html,body{	    	width: 100%;	    	height: 100%;	    }      .left{      	width: 300px;        position: absolute;      	height: 100%;      	background: red;      }      .right{      	margin-left: 300px;      	height: 100%;      	background: blue;      }

  

 

左边固定,右边自适应布局的两种实现