一个高度自适应的div，里面有两个div，一个div高度为100px,另一个填满剩余的高度

html代码如下

	<div class="main">
		<div class="box1"></div>
		<div class="box2"></div>
	</div>

第一种方式，利用定位

	  html,body{
			height: 100%;
			margin:0px;
			padding:0px;
		}
		.main{
			position: relative;
			height: 100%;
		}
		.box1{
			height: 100px;
			background-color: red;
		}
		.box2{
			position: absolute;
			width: 100%;
			top: 100px;
			bottom: 0px;
			background-color: blue;
		}

第二种方式，同样是定位，不过需要对main设置box-sizing: border-box;

		 .main{
			position: relative;
			height: 100%;
			padding-top: 100px;
			box-sizing: border-box;
		}
		.box1{
			position: absolute;
			top: 0px;
			height: 100px;
			width: 100%;
			background-color: red;
		}
		.box2{
			height: 100%;
			background-color: blue;
		}

第三种方式，利用css3的计算属性calc，css代码最少。

		.main{
			height: 100%;
		}
		.box1{
			height: 100px;
			background-color: red;
		}
		.box2{
			height: calc(100% - 100px);
			background-color: blue;
		}

`