@[toc]
实现两端固定中间自适应的布局方法有多种，其中有名的就是两大金典布局，圣杯布局和双飞翼布局，实现代码如下：
一、圣杯布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
html,
body{
height: 100%;
overflow: hidden;
}
.container{
height: 100%;
padding: 0 200px;
}
.left,
.right{
width: 200px;
min-height: 200px;
background-color: aqua;
}
.center{
width:100%;
min-height:400px;
background: orange;
}
.left,
.center,
.right{
float: left;
}
.left{
margin-left: -100%;
position: relative;
left: -200px;
}
.right{
margin-right: -200px;
}
</style>
</head>
<body>
<!-- Clearfix用来清除浮动 -->
<div class="container clearfix">
<div class="center"></div>
<div class="left"></div>
<div class="right"></div>
<!-- 没有float的时候都是竖着排的， -->
</div>
</body>
</html>
圣杯布局里的div排放顺序：可以这样理解，类似奖杯，左右两边和杯子主身是一起的，所以布局是并列的，center,left,right，因为操作的主要是center部分，因此把center放在最前面。
二、双飞翼布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
html,
body {
height: 100%;
overflow: hidden;
}
.container,
.left,
.right {
float: left;
}
.container {
width: 100%;
}
.container .center {
margin: 0 200px;
min-height: 400px;
background: orange;
}
.left,
.right{
width:200px;
min-height:200px;
background: #00FFFF;
}
.left {
margin-left: -100%;
}
.right {
margin-left: -200px;
}
</style>
</head>
<body>
<div class="container">
<div class="center"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</body>
</html>
双飞翼布局:两边的翅膀可以用也可以拿开，因此布局时center独立出来，left和right单独放(联想帮助记忆)，但是同样主要操作的还是center，所以把center放在最前面。
三、其他布局（1）——定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
html,
body{
height: 100%;
overflow: hidden;
}
.container{
position: relative;
height: 100%;
}
.left,
.right{
position: absolute;
top:0;
width: 200px;
min-height: 200px;
background-color: #00FFFF;
}
.left{
left: 0;
}
.right{
right: 0;
}
.center{
margin: 0 200px;
min-height: 400px;
background-color: antiquewhite;
}
</style>
</head>
<body>
<div class="container">
<div class="center"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
父盒子定位为relative，左右子盒子定位为absolute，再做位置上的调整
四、其他布局（2）——flex布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
html,
body{
overflow: hidden;
}
.container{
display: flex;
justify-content: space-around;
height: 100%;
}
.left,
.right{
/* 0 0 既不放大也不缩小，200占有的宽度 */
flex:0 0 200px;
height: 200px;
background-color: #00FFFF;
}
.center{
flex:1;
min-height: 400px;
background-color: antiquewhite;
}
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
<!-- 没有float的时候都是竖着排的， -->
</div>
</body>
</html>
父盒子定为flex布局，左右两端盒子设置相应的宽度，center盒子flex:1实现自适应。
