使用彈性布局實現聖杯布局：
<!-- 聖杯布局的要求
-- 縱向分為上中下三部分，上中下寬度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>