常用布局【巧妙使用定位与怪异盒模型】
这种布局，管理后台是很常用的，如下图，顶部一栏是固定的，左上角一般是LOGO，左侧也是固定的，一般是导航，右侧为内容区，会出现内部滚动条，三块内容撑满了整个屏幕，不会出现滚动条。
不废话直接上代码
1、绝对定位法
撑开整个屏幕
<body>
<header>
header
</header>
<aside>Side Nav</aside>
<section id="main">
<div id="content">
<div style="height:800px">content 1!</div>
<div style="height:200px">content 2!</div>
<div style="height:200px">content 3!</div>
</div>
</section>
</body>
*{padding:0;margin:0;border:none;}
body{
font-size:14px;
font-family:"微软雅黑";
}
header{
width:100%; // 设置left:0;right:0;后其实就不用设置width:100%了，他们功能相同
height:80px;
position:absolute;
top:0;
left:0;
right:0;
background-color:#123;
color:#fff;
}
aside{
width:300px;
position:absolute;
top:80px; // 导航的高度
left:0; // 有了固定宽度，就不用设置right值了
bottom:0;
}
#main{
position: absolute;
left: 300px; // 左侧导航的宽度
top: 80px; // 导航高度
right: 0;
bottom: 0;
overflow: hidden;
}
#content{
height:100%;
overflow-x:hidden;
overflow-y:scroll;
background-color:#789;
color:#fff;
}
header、aside、content三块内容都是通过绝对定位定在正确的位置，其中#main的作用只是为了撑开空间，所以它里面要嵌套一层#content，用于放真正的内容。
2、"怪异"盒模型border-box法
box-sizing属性
css的box-sizing属性用来设置或检索对象的盒模型组成模式。取值有如下两个：
- content-box：
padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding )
此属性表现为标准模式下的盒模型。
- border-box：
padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width )
此属性表现为“怪异”模式下的盒模型。
HTML布局同方法一，不再贴相同代码，下面直接贴CSS
*{padding:0;margin:0;border:none;}
html{
height:100%; //高度与宽度的100%必须从最顶层的html标签开始设置
width:100%;
}
body{
height:100%; // 撑开整个屏幕
width:100%;
font-size:14px;
font-family:"微软雅黑";
}
header{
width:100%;
height:80px;
position:fixed;
top:0;
left:0;
right:0;
background-color:#123;
color:#fff;
}
aside{
width:300px;
position:fixed;
top:80px;
left:0;
bottom:0;
}
#main{
width:100%;
height:100%;
padding:80px 0 0 300px;
box-sizing:border-box;
}
#content{
height:100%;
overflow:auto;
background-color:#789;
color:#fff;
}
header、aside都是通过fixed定位在正确的位置，这时候他两是浮起来的，下面并没有东西，所以#main宽高都设置为100%是占据了整个屏幕空间的，这时候就需要padding把header和aside的位置“过滤”掉，只留下属于#main的位置，这就需要将#main设置为border-box，否则padding会在宽高100%的基础上再增加80px和300px，会超出可视区范围，出现滚动条；设为border-box，就是在宽高100%的基础上减去80px和300px（说的有点通俗），剩下的就是#main的空间了。同样的道理，#main只是为了撑开空间，真正的内容还是放在他的子元素#content里。这里#content的高度100%是继承自他的父级#main的高度，也就是去除header的80px后的高度，超过这个高度就会overflow：auto出现滚动条。
说了这么多，大家可以自己敲一遍上面的代码，然后在浏览器里看一下效果，加深记忆，帮助理解。
