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.  padding-left: 210px;   
6.  padding-right: 190px;   
7. }   
8. .main {   
9.  float: left;   
10.  width: 100%;   
11.  height: 300px;   
12.  background-color: rgba(255, 0, 0, .5);   
13. }   
14. .sub {   
15.  position: relative;   
16.  left: -210px;   
17.  float: left;   
18.  width: 200px;   
19.  height: 300px;   
20.  margin-left: -100%;   
21.  background-color: rgba(0, 255, 0, .5);   
22. }   
23. .extra {   
24.  position: relative;   
25.  rightright: -190px;   
26.  float: left;   
27.  width: 180px;   
28.  height: 300px;   
29.  margin-left: -180px;   
30.  background-color: rgba(0, 0, 255, .5);   
31. }  

点击查看在线demo

完整实例
效果如下：

CSS 和 DOM 代码如下：

1.   
2.   
3.   
4.     "utf-8">   
5.     "X-UA-Compatible" content="IE=edge,chrome=1">   
6.        
7.   
8.     "text/css">   
9.     body {background-color: #ffffff; font-size:14px;}   
10.     #hd, #ft {padding:20px 3px; background-color: #cccccc; text-align: center;}   
11.     .bd-lft, .bd-rgt, .bd-3-lr, .bd-3-ll, .bd-3-rr {margin:10px 0; min-width:400px;}   
12.     .main {background-color: #03a9f4; color:#ffffff;}   
13.     .aside, .aside-1, .aside-2 {background-color: #00bcd4; color:#ffffff;}   
14.     p {margin:0; padding:20px; text-align: center;}   
15.        
16.        
17.     /* 左侧栏固定宽度，右侧自适应 */  
18.     .bd-lft {   
19.         zoom:1;   
20.         overflow:hidden;   
21.         padding-left:210px;   
22.     }   
23.     .bd-lft .aside {   
24.         float:left;   
25.         width:200px;   
26.         margin-left:-100%; /*= -100%*/  
27.   
28.         position:relative;   
29.         left:-210px; /* = -parantNode.paddingLeft */  
30.         _left: 0; /*IE6 hack*/  
31.     }   
32.     .bd-lft .main {   
33.         float:left;   
34.         width:100%;   
35.     }   
36.   
37.   
38.     /* 右侧栏固定宽度，左侧自适应 */  
39.     .bd-rgt {   
40.         zoom:1;   
41.         overflow:hidden;   
42.         padding-right:210px;   
43.     }   
44.     .bd-rgt .aside {   
45.         float:left;   
46.         width:200px;   
47.         margin-left:-200px; /* = -this.width */  
48.   
49.         position:relative;   
50.         rightright:-210px; /* = -parantNode.paddingRight */  
51.     }   
52.     .bd-rgt .main {   
53.         float:left;   
54.         width:100%;   
55.     }   
56.   
57.   
58.     /* 左中右 三栏自适应 */  
59.     .bd-3-lr {   
60.         zoom:1;   
61.         overflow:hidden;   
62.         padding-left:210px;   
63.         padding-right:210px;   
64.     }   
65.     .bd-3-lr .main {   
66.         float:left;   
67.         width:100%;   
68.     }   
69.     .bd-3-lr .aside-1 {   
70.         float: left;   
71.         width:200px;   
72.         margin-left: -100%;   
73.   
74.         position:relative;   
75.         left: -210px;   
76.         _left: 210px; /*IE6 hack*/  
77.     }   
78.     .bd-3-lr .aside-2 {   
79.         float: left;   
80.         width:200px;   
81.         margin-left: -200px;   
82.   
83.         position:relative;   
84.         rightright: -210px;   
85.     }   
86.   
87.     /* 都在左边，右侧自适应 */  
88.     .bd-3-ll {   
89.         zoom:1;   
90.         overflow:hidden;   
91.         padding-left:420px;   
92.     }   
93.     .bd-3-ll .main {   
94.         float:left;   
95.         width:100%;   
96.     }   
97.     .bd-3-ll .aside-1 {   
98.         float: left;   
99.         width:200px;   
100.         margin-left: -100%;   
101.   
102.         position:relative;   
103.         left: -420px;   
104.         _left: 0px; /*IE6 hack*/  
105.     }   
106.     .bd-3-ll .aside-2 {   
107.         float: left;   
108.         width:200px;   
109.         margin-left: -100%;   
110.   
111.         position:relative;   
112.         left: -210px;   
113.         _left: 210px; /*IE6 hack*/  
114.     }   
115.   
116.     /* 都在右边，左侧自适应 */  
117.     .bd-3-rr {   
118.         zoom:1;   
119.         overflow:hidden;   
120.         padding-right:420px;   
121.     }   
122.     .bd-3-rr .main {   
123.         float:left;   
124.         width:100%;   
125.     }   
126.     .bd-3-rr .aside-1 {   
127.         float: left;   
128.         width:200px;   
129.         margin-left: -200px;   
130.   
131.         position:relative;   
132.         rightright: -210px;   
133.     }   
134.     .bd-3-rr .aside-2 {   
135.         float: left;   
136.         width:200px;   
137.         margin-left: -200px;   
138.   
139.         position:relative;   
140.         rightright: -420px;   
141.     }   
142.   
143.   
144.        
145.   
146.   
147.   
148.   
149.     "hd">头部