CSS布局终极方案之–圣杯布局（兼容IE6+，现代浏览器）
经典三列布局，也叫做圣杯布局【Holy Grail of Layouts】是Kevin Cornell在2006年提出的一个布局模型概念，在国内最早是由淘宝UED的工程师传播开来，在中国也有叫法是双飞翼布局，它的布局要求有几点：
- 三列布局，中间宽度自适应，两边定宽
- 中间栏要在浏览器中优先展示渲染
- 允许任意列的高度最高
- 要求只用一个额外的DIV标签
- 要求用最简单的CSS、最少的HACK语句
效果图：
CSS 和 DOM 代码如下：
圣杯布局
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>圣杯布局</title>
<style type="text/css">
body {background-color: #ffffff; font-size:14px;}
#hd, #ft {padding:20px 3px; background-color: #cccccc; text-align: center;}
.bd-lft, .bd-rgt, .bd-3-lr, .bd-3-ll, .bd-3-rr {margin:10px 0; min-width:400px;}
.main {background-color: #03a9f4; color:#ffffff;}
.aside, .aside-1, .aside-2 {background-color: #00bcd4; color:#ffffff;}
p {margin:0; padding:20px; text-align: center;}
/* 左侧栏固定宽度，右侧自适应 */
.bd-lft {
zoom:1;
overflow:hidden;
padding-left:210px;
}
.bd-lft .aside {
float:left;
width:200px;
margin-left:-100%; /*= -100%*/
position:relative;
left:-210px; /* = -parantNode.paddingLeft */
_left: 0; /*IE6 hack*/
}
.bd-lft .main {
float:left;
width:100%;
}
/* 右侧栏固定宽度，左侧自适应 */
.bd-rgt {
zoom:1;
overflow:hidden;
padding-right:210px;
}
.bd-rgt .aside {
float:left;
width:200px;
margin-left:-200px; /* = -this.width */
position:relative;
right:-210px; /* = -parantNode.paddingRight */
}
.bd-rgt .main {
float:left;
width:100%;
}
/* 左中右 三栏自适应 */
.bd-3-lr {
zoom:1;
overflow:hidden;
padding-left:210px;
padding-right:210px;
}
.bd-3-lr .main {
float:left;
width:100%;
}
.bd-3-lr .aside-1 {
float: left;
width:200px;
margin-left: -100%;
position:relative;
left: -210px;
_left: 210px; /*IE6 hack*/
}
.bd-3-lr .aside-2 {
float: left;
width:200px;
margin-left: -200px;
position:relative;
right: -210px;
}
/* 都在左边，右侧自适应 */
.bd-3-ll {
zoom:1;
overflow:hidden;
padding-left:420px;
}
.bd-3-ll .main {
float:left;
width:100%;
}
.bd-3-ll .aside-1 {
float: left;
width:200px;
margin-left: -100%;
position:relative;
left: -420px;
_left: 0px; /*IE6 hack*/
}
.bd-3-ll .aside-2 {
float: left;
width:200px;
margin-left: -100%;
position:relative;
left: -210px;
_left: 210px; /*IE6 hack*/
}
/* 都在右边，左侧自适应 */
.bd-3-rr {
zoom:1;
overflow:hidden;
padding-right:420px;
}
.bd-3-rr .main {
float:left;
width:100%;
}
.bd-3-rr .aside-1 {
float: left;
width:200px;
margin-left: -200px;
position:relative;
right: -210px;
}
.bd-3-rr .aside-2 {
float: left;
width:200px;
margin-left: -200px;
position:relative;
right: -420px;
}
</style>
</head>
<body>
<div id="hd">头部</div>
<div class="bd-lft">
<div class="main">
<p>主内容栏自适应宽度</p>
</div>
<div class="aside">
<p>侧边栏固定宽度</p>
</div>
</div>
<div class="bd-rgt">
<div class="main">
<p>主内容栏自适应宽度</p>
</div>
<div class="aside">
<p>侧边栏固定宽度</p>
</div>
</div>
<div class="bd-3-lr">
<div class="main">
<p>主内容栏自适应宽度</p>
</div>
<div class="aside-1">
<p>侧边栏1固定宽度</p>
</div>
<div class="aside-2">
<p>侧边栏2固定宽度</p>
</div>
</div>
<div class="bd-3-ll">
<div class="main">
<p>主内容栏自适应宽度</p>
</div>
<div class="aside-1">
<p>侧边栏1固定宽度</p>
</div>
<div class="aside-2">
<p>侧边栏2固定宽度</p>
</div>
</div>
<div class="bd-3-rr">
<div class="main">
<p>主内容栏自适应宽度</p>
</div>
<div class="aside-1">
<p>侧边栏1固定宽度</p>
</div>
<div class="aside-2">
<p>侧边栏2固定宽度</p>
</div>
</div>
<div id="ft">底部</div>
</body>
</html>
文章导航