一、双飞翼布局（左右宽度固定，中间宽度自适应）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自适应布局</title>
<style type="text/css">
body,html{ height: 100%; } //这个要加上
*{ margin: 0; padding: 0; }
.left{
width:200px;
height:100%;
background: red;
position: absolute;
left: 0;
top: 0;
}
.right{
width:30%;
height:100%;
background: red;
position: absolute;
right: 0;
top: 0;
}
.center{
height: 100%;
background: green;
padding-left: 200px;
padding-right: 30%;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="center">啊是立刻的家啊塑料袋快接啊岁的卡拉胶所考虑的阿莱克斯多久啊上课了多久啊昆仑山大家啊克里斯蒂就ask了多久阿隆索肯德基啊螺丝钉看见啊岁的卡决定</div>
<div class="right">啊是立刻的就阿隆索肯德基阿桑了多久了肯德基阿斯利康多家啊是凯立德 </div>
</body>
</html>
二、圣杯布局（上下高度固定，中间高度自适应）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
body,html{
height: 100%;
}
div:nth-child(1){
width: 100%;
height: 100px;
background: red;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
div:nth-child(2){
width: 100%;
height:100%;
background: green;
padding: 100px 0;
box-sizing: border-box;
}
// 另一种写法
/*div:nth-child(2){
width: 100%;
height:100%;
background: green;
position: absolute;
top: 0;
padding-top: 100px;
box-sizing: border-box;
}*/
div:nth-child(3){
width: 100%;
height: 100px;
background: blue;
position: absolute;
bottom: 0;
left: 0;
}
</style>
</head>
<body>
<div>头部</div>
<div>阿斯兰迪卡聚少离多卡死接待卡机了的卡机上课了的啊数据库的连接啊拉开三季度挨打卡加点辣椒肯德基阿拉丁就是看到了阿萨斯盛大了多久啊塑料袋空间ask了大家啊了的就ask了的</div>
<div>底部</div>
</body>
</html>
