解决 全屏 布局

需求1：定栏，底栏，定高！
主内容区域，左边烂定宽， 右边自适应，高度自适应。


(1)position

	（1）	height: 100%;
			overflow: hidden;	/*滚动条禁用*/
		高度时100%，同时禁止滚动条。

	（2）实现right内滚动，是使用在right内插入div.class='inner'，将此div，overflow设定为auto。
然后将其内部的inner的样式设定为min-height = 1500px;这样就有滚动条了。

兼容性，出了IE6，其他都还好。

<div class="parent">
	<div class="top">top</div>
	<div class="left">left</div>
	<div class="right">
		<div class="inner">right</div>
	</div>
	<div class="bottom">bottom</div>
</div>


<style type="text/css">
	body {
		margin: 0;
		padding: 0;
	}
	html, body, .parent {
		height: 100%;
		overflow: hidden;	/*滚动条禁用*/
	}
	.top {
		position: absolute;
		top: 0;
		left: 0;
		height: 100px;
		 100%;
		background-color: #888;
	}
	.left {
		position: absolute;
		left: 0;
		top: 100px;
		bottom: 50px;
		 200px;
		background-color: #999;
	}
	.right {
		position: absolute;
		overflow: auto;
		left: 200px;
		right: 0;
		top: 100px;
		bottom: 50px;
		background-color: #aaa;
	}
	.bottom {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 50px;
		background-color: #bbb;
	}

	.inner {
		min-height: 2000px;
	}

</style>


(2)flex

首先让parent成为布局的容器，
然后设定top和button是定高的，middle占据剩余的区域。

然后让middle成为容器，将left定宽，right占据剩余的宽度。
注意在middle内flex并没有设定方向，因为默认是水平方向。


兼容性，IE9以上！

<div class="parent">
	<div class="top">top</div>
	<div class="middle">
		<div class="left">left</div>
		<div class="right">
			<div class="inner">right</div>
		</div>
	</div>
	<div class="bottom">bottom</div>
</div>


<style type="text/css">
	body {
		margin: 0;
		padding: 0;
	}
	html, body, .parent {
		height: 100%;
		overflow: hidden;	/*滚动条禁用*/
	}

	.parent {
		display: flex;
		flex-direction:column;
	}

	.top {
		height: 100px;
		 100%;
		background-color: #888;
	}
	.bottom {
		height: 50px;
		background-color: #bbb;
	}
	.middle {
		flex:1;
		display: flex;
	}
	.left {
		 200px;
		background-color: #999;
	}
	.right {
		flex:1;
		overflow: auto;
		background-color: #aaa;
	}

	.inner {
		min-height: 2000px;
	}

</style>



需求2:定高和定宽，变为百分比。

将px－－》％

注意：定栏 和 底栏 都是占据body的宽度的。
left的宽度也是宽度的百分比。

<div class="parent">
	<div class="top">top</div>
	<div class="left">left</div>
	<div class="right">
		<div class="inner">right</div>
	</div>
	<div class="bottom">bottom</div>
</div>


<style type="text/css">
	body {
		margin: 0;
		padding: 0;
	}
	html, body, .parent {
		height: 100%;
		overflow: hidden;	/*滚动条禁用*/
	}
	.top {
		position: absolute;
		top: 0;
		left: 0;
		height: 10%;
		 100%;
		background-color: #888;
	}
	.left {
		position: absolute;
		left: 0;
		top: 10%;
		bottom: 5%;
		 20%;
		background-color: #999;
	}
	.right {
		position: absolute;
		overflow: auto;
		left: 20%;
		right: 0;
		top: 10%;
		bottom: 5%;
		background-color: #aaa;
	}
	.bottom {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 5%;
		background-color: #bbb;
	}

	.inner {
		min-height: 2000px;
	}

</style>



需求3 ：内容自适应，其他不变。
中间占据剩余空间，中间的右侧占据剩余空间。

position，是不适合这样的方式，只能用flex。
Grid也可以，但是现在只是一个草案。

实现就是将flex之前的所有的高度和宽度去掉，让其自适应。

<div class="parent">
	<div class="top">top</div>
	<div class="middle">
		<div class="left">left</div>
		<div class="right">
			<div class="inner">right</div>
		</div>
	</div>
	<div class="bottom">bottom</div>
</div>


<style type="text/css">
	body {
		margin: 0;
		padding: 0;
	}
	html, body, .parent {
		height: 100%;
		overflow: hidden;	/*滚动条禁用*/
	}

	.parent {
		display: flex;
		flex-direction:column;
	}

	.top {
		background-color: #888;
	}

	.bottom {
		background-color: #bbb;
	}
	
	.middle {
		flex:1;
		display: flex;
	}
	.left {
		background-color: #999;
	}
	.right {
		flex:1;
		overflow: auto;
		background-color: #aaa;
	}

	.inner {
		min-height: 2000px;
	}

</style>



position，支持很好，性能较好。 但是自适应无法实现，
移动端使用flex很好。但移动端 性能比较差。可以实现完全自适应。