自适应布局

两列自适应布局

即为一列宽度固定，而另外一列宽度自适应。

1. 利用定位处理。(position)

<style type="text/css">
		.row{
			width: 100%;
			background: #000;
			padding-left: 300px;
			position: relative;
			box-sizing: border-box;

		}
		.side{
			width:300px;
			height:500px;
			background: #C0392B;
			position: absolute;      
			left:0;
		
		}
		.main{
			width: 100%;
			height: 500px;
			background: #E74c3c;
		}
	</style>

<div class="row"> 
	<div class="side"></div>
	<div class="main"></div>
</div>

定义一个外层容器包裹着两列div，父容器宽度定义100%，左侧固定宽度栏设置定宽300px,高度500px，主区域main定义width:100%，高度500px。此时，由于其都是块级元素，所以依次向下排，row的高度也被撑为side+main的高度。

为了使main区域移动到上面，通过定位side区域为position:absolute ，使其脱离文档流，main区域自动移动上去。但是，side会将main左侧300px覆盖掉。为了解决这个问题，可以给row定义一个padding-left:300px;将其推开300px，接着，定义row区域相对定位position:relative;给side区域一个left:0；将其相对row定位到了最左侧。最后由于padding撑开了300px，所以用box-sizing:border-box;来修正。