CSS的三列式"圣杯布局"方案完全解析

圣杯布局源自 Matthew Levine 在06年的一篇文章，其DOM结构如下：

1. <div class="container">  
2.     <div class="main"></div>  
3.  <div class="sub"></div>  
4.  <div class="extra"></div>  
5. </div>  

流程解说
接下来，让我们一步一步地实现圣杯布局；

1、 首先分别浮动main、sub、extra三列， 然后利用负外边距把sub列和extra列定位到左右两边。这时的CSS代码如下：

1. .main {   
2.  float: left;   
3.  width: 100%;   
4.  height: 300px;   
5.  background-color: rgba(255, 0, 0, .5);   
6. }   
7. .sub {   
8.  float: left;   
9.  width: 200px;   
10.  height: 300px;   
11.  margin-left: -100%;   
12.  background-color: rgba(0, 255, 0, .5);   
13. }   
14. .extra {   
15.  float: left;   
16.  width: 180px;   
17.  height: 300px;   
18.  margin-left: -180px;   
19.  background-color: rgba(0, 0, 255, .5);   
20. }  

2、 完成上步后，sub和extra列已经到了正确的位置，但是sub和extra列却覆盖了main的两边，对于这个问题，圣杯布局的解决办法是给容器container添加左、右内边距，从而让main列定位到正确的位置。

1. .container {   
2.  padding-left: 210px;   
3.  padding-right: 190px;   
4. }  

3、 完成第二步后又出现了新问题：sub、extra列也受到容器左右内边距的影响位置发生了移动。为了解决这个问题，圣杯布局使用相对定位使sub、extra列回到正确的位置。新添加代码如下：

1. .sub {   
2.  position: relative;   
3.  left: -210px;   
4. }   
5. .extra {   
6.  position: relative;   
7.  rightright: -190px;   
8. }  

4、 当浏览器缩小到一定程度时，这个布局可能会被破坏，可以在body上添加min-width属性解决。最终的圣杯布局CSS代码如下：

1. body {   
2.  min-width: 600px; /* 2*sub + extra */  
3. }   
4. .container {   
5.