使用弹性布局实现圣杯布局：
<!-- 圣杯布局的要求
-- 纵向分为上中下三部分，上中下宽度100%，上下高度固定；中间部分高度自动。
-- 中间被拆分为三栏：左右宽度固定，中间自适应；
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯布局</title>
</head>
<style>
.header{
flex: 1 1 auto;
background: #eed;
height: 100px;
}
.body{
width: 100%;
height: 400px;
display: flex;
}
.right,
.left{
flex: 0 0 200px;
background: #ff0;
}
.middle{
flex: 1 1 auto;
/*height: 100%;*/
background: #00f;
}
.footer{
flex: 1 1 auto;
background: #0f0;
height: 100px;
}
</style>
<body>
<div class="header">header</div>
<div class="body">
<div class="left">left</div>
<div class="middle">middle</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
</body>
</html>
使用传统CSS3实现圣杯布局：
圣杯布局
圣杯布局和双飞翼布局：
1，必须先渲染中间内容，在渲染两边。
2，而且是三列，两边固定宽度，中间自适应。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯布局</title>
<style type="text/css">
*{margin: 0;padding: 0;} /*重置浏览器默认值*/
/*设置页头和页尾样式*/
.header,.footer{width: 100%;height: 40px;color: #fff;background: #333;line-height: 40px;text-align: center;}
/*设定容器上下内边距为0，左右内边距分别为220px 和 200px（这里的220px是留着给下面的.right，另外200px是给下面的.left预留的）*/
.container{ padding: 0 220px 0 200px;overflow: hidden; }
/*中间，左右内容使用相对定位，并且全部向左浮动*/
.middle,.left,.right{
position: relative;
float: left;
}
.middle{
width: 100%;
height: 300px;
color: #fff;
background: pink;
}
.left{
width: 200px;
height: 300px;
color: #fff;
background: green;
margin-left: -100%; /*因为.middle .left .right全部浮动，所有只要一行没有溢出就会排列成一行。
向移动-100%时，left就会一直往后退，直到向上跳一行，可以使用调试工具查看。*/
left: -200px; /*这里的-200px，是通过relative定位移动到padding-left:200px;的。正负号表示向后或者向前移动，负数就是向左移动，正数向右移动。*/
}
.right{
width: 220px;
height: 300px;
color: #fff;
background: blue;
margin-left: -220px;/*因为.middle .left .right全部浮动，所有只要一行没有溢出就会排列成一行。
这里向左移动220px就会直接跳到上面一行覆盖.middle的右边。具体移动数据可以使用调试工具查看。*/
right: -220px;/*这里的-220px，是通过relative定位移动到padding-left:220px;的。正负号表示向后或者向前移动，负数就是向左移动，正数向右移动。*/
}
</style>
</head>
<body>
<div class="header">header</div>
<div class="container">
<div class="middle">midden</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
</body>
</html>
双飞翼布局：
圣杯布局
圣杯布局和双飞翼布局：
1，必须先渲染中间内容，在渲染两边。
2，而且是三列，两边固定宽度，中间自适应。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双飞翼布局</title>
<style type="text/css">
*{padding: 0;margin: 0;font-size: 16px;}
/*头尾部样式*/
.header,.footer{width: 100%; height: 60px; color: #fff;background: #333;line-height: 60px;text-align: center;}
/*内容样式*/
.container,.left,.right{float: left;}/*注意这里是.container进行浮动的，而不是.middle。和圣杯布局相比少了一个定位position:relative*/
.container{width: 100%;min-height: 300px;}
.middle{height: 300px; margin-left: 250px;margin-right: 300px;background: gray; }
.left{width: 250px;height: 300px;background: red;margin-left: -100%;}/*这里和圣杯布局一样，使用负边距会上移一行。*/
.right{width: 300px;height: 300px;background: green;margin-left: -300px;}/*这里和圣杯布局一样，使用负边距会上移一行。*/
.clearBoth{clear: both;}/*在最后浮动的元素添加一个块级元素，清除浮动*/
</style>
</head>
<body>
<div class="header">网页头部</div>
<div class="container">
<div class="middle">中间</div>
</div>
<div class="left">左边</div>
<div class="right">右边</div>
<div class="clearBoth"></div>
<div class="footer">尾部</div>
</body>
</html>