垂直三栏布局拥有相同高度的方法

作者: Alan PearceLUPA开源社区9W'ce^*E0{*a
原文: Multi-Column Layouts Climb Out of the BoxLUPA开源社区5R9BrJ!xy.wj
地址: http://alistapart.com/articles/multicolumnlayouts
Z
lbG:uON:d0我们都了解拥有相同高度的布局是很麻烦的事，有很多相关资料提到过相关设计方法，所以在这我就不多做解释了。LUPA开源社区*m1en@ A!y
最近在研究一个两个栏目的动态布局，每个栏目背景不同。我立刻想起了Dan Cederholm的Faux Columns，但我仍然需要一个动态布局的方法。我又看了完美布局的文章One True Layout，但是有很多bug，需要许多注释和程序。甚至考虑用JavaScrip来实现栏目始终保持同一高度，但是不行。绝望之余，几乎要用table布局，不，一定还有更好的方法。我想着一个问题“盒子外面是什么”，border！如果我可以使“sidebar”（或"rail"）的div相对与“content”的div浮动，就可以实现多栏目相同高度。这个方法在很多地方介绍过：Douglas Livingstone的introduced ，Holly的extended John Bergevin的Position Is Everything。由one true layout的方法发展而来，用更简洁清楚的代码 实现了两个栏目的动态变化。下面是代码：
[l7F9K/n;M0HTML:

CODE:

rh7V"S/ZQ0
E-A*DM0Wrx0<div id="container">
6\z/iOd0_8|D0  <div id="content">This is<br />some content</div>
zO6x
~;Hd/TL0  <div id="rail">This is the rail</div>
0Br0M i X`0SQ0</div>LUPA开源社区J6RI'Q9X_0l3t
CSS:
JNR^/Q-|$M0#container{LUPA开源社区f/il*n3[*P
  background-color:#0ff;LUPA开源社区ukR3r({KHfh}
  overflow:hidden;
W,HM5}ImR1F0  width:750px;
xBvwU@b|z8m0}LUPA开源社区?q6w)B
JD0x9o L
#content{
,jGm:s%NX~l W0  background-color:#0ff;
'J7U3W l nr.}WGF0  width:600px;
D+_U'?*o]D l)?K0  border-right:150px solid #f00; »
r5\DX^w6Ab0  /* The width and color of the rail */LUPA开源社区T0JM l$g$I
  margin-right:-150px; /* Hat tip to Ryan Brill */LUPA开源社区9N%^k+sa@S
  float:left;
YE*Db+\ W]@0}LUPA开源社区b&[d*^(d{uI
#rail{
6g1F+V1zyx5R:cX0  background-color:#f00;
]e4mM2r0  width:150px;LUPA开源社区k,k'D#G%],Rg:X
  float:left;
,`EqVN7E,WJ0}给content div右加border，颜色宽度和rail一样，并相对与rail浮动。Margin:-150px;使rail div移到margin腾出的空间。如果content div变的比rail div 高，border随content div变高。视觉效果就是好像rail div也在变高。container的颜色设定和content div一样，如果rail div达到最高，container随之变高，这样就给我们content变高的效果。LUPA开源社区$t Te/uDt3m
看看效果。See it in action 。试改变字体大小，布局随之变化。
zu1C'v
OL \Z0\03个栏目：3个颜色
,Y:n"^d#q V03个栏目的布局有点不同:直接给container div加border.LUPA开源社区7ljc!YY
HTML:

CODE:

7k#x:Z,yFIR9s0
Ta7zTdSL0v0<div id="container">
Af!~{8Eu^0  <div id="center">CENTER<br />COLUMN CENTER</div>
4T2S'C4J T%[,t[ s1\ TP0  <div id="leftRail">LEFT RAIL</div>LUPA开源社区0T(f#z8P]aDu?
  <div id="rightRail">RIGHT RAIL</div>LUPA开源社区 XSv-J E
</div>
6jOxs7xh@"dn0CSS:
#wEI8e/P6SlJL z0#container{LUPA开源社区z;esgu
  background-color:#0ff;LUPA开源社区g-]%vA3]0@&?Rv5U2B6l
  float:left;LUPA开源社区\2VPF
VT$U6w Cv
  width:500px;LUPA开源社区 xb*X4yL#c,}{!w
  border-left:150px solid #0f0; » LUPA开源社区
v*ee:Z0A)T gP%}
  /* The width and color of the left rail */
8B6OY(zt;f/a"I+p(TD0  border-right:200px solid #f00; » LUPA开源社区\mO;J|o3g ~3MH x
  /* The width and color of the right rail */LUPA开源社区H$WdC1`.fE:E1}
}LUPA开源社区1h9F)hcWW'K
#leftRail{LUPA开源社区R'{t@&S#c-` H
  float:left;
,{[f,c1TW0  width:150px;LUPA开源社区7jQK+D\
  margin-left:-150px;
,_#I5ikQ.\ P.g0  position:relative;
#bqZ Mv.d:sS:_jLgc0}LUPA开源社区b!V\ WUW+E:H
#center{LUPA开源社区%FU&b&]c5u
  float:left;LUPA开源社区:g'Fp*OH:A$}[
  width:500px;
6}m:cF}g-y
Qak0  margin-right:-500px;LUPA开源社区ZP)Xj Kp&qo5P
}LUPA开源社区IYiA
EI![0KaV1a
#rightRail{LUPA开源社区\chL:o
  float:right;LUPA开源社区w2@Cmx#g0YiN^
  width:200px;LUPA开源社区;^!f ` I0tb
M i o
  margin-right:-200px;
%A'T'Y8^E/S#@0s(m q*W0  position:relative;LUPA开源社区F?mm,{6W
}中间的栏目margin-right:-150px 使左边的rail div始终沿中间栏目的左沿浮动，使旁边栏目在真确的位置显示。还有一些方法可以实现，但这个方法最好，更易实现流动布局（动态布局）。
CP~{K |I0因为边栏在container div外，浮动在border上。使用overflow: hidden使之隐藏：IE不支持，Firefox可以实现。边栏不需要设置颜色，它会于container div的颜色保持一致。LUPA开源社区:XSa6]b8C SY
流动布局LUPA开源社区
l
XE ]D E7]q5Z
了解定宽布局之后，我尝试把这个方法用到动态布局中去。边栏仍然需要设置固定宽，很多浏览器不支持border:**%的属性。但是我门可以使中间栏目自适应。LUPA开源社区U2Ku].Ex%j _*_$dw
CSS:

CODE:

5e;bq,S-djX$f&A0#container{LUPA开源社区{:JwW.T~
  background-color:#0ff;
Pg d3s"JY0  overflow:hidden;
wz3aE&k0  margin:0 100px;LUPA开源社区7{ q4J:R2tc
  padding-right:150px; /* The width of the rail */
'S5YT2v%A;}0}
7C'a/qDcH)b3rC0* html #container{
ZH-V{u~.QM8h0  height:1%; /* So IE plays nice */
v\5s V]WF5t4]
A0}
VZ0MQBQ)Bp;e0#content{LUPA开源社区,|{Z9Dh"s4|$f
  background-color:#0ff;
%zA^g,a*h0  width:100%;LUPA开源社区vLFyV
  border-right:150px solid #f00;LUPA开源社区+f;ej+Y`9LD
  margin-right:-150px;LUPA开源社区6j@3UZGP-L
  float:left;
G9Z b_r0}
l/w(U h@%x:Z0#rail{
"N q5n@LPf4sT0  background-color:#f00;LUPA开源社区#O _|Nc
  width:150px;
8| Vm c,ZS0  float:left;
k5f'\u1I'|B%e0  margin-right:-150px;
2zX,hy"Yh+b0}3个栏目自适应布局
u
s+gf@9@0方法简单，不需要引用图片，没有BUG.
L4I p5F$xX'M3F1o0HTML:

CODE:

M
l$E-hcD0LUPA开源社区-F;x
T
kIwX
q
<div id="container">LUPA开源社区5Wb pc7mh&ZsF~
  <div id="center">Center Column Content</div>
%IpFo,h0  <div id="leftRail">Left<br /> Sidebar</div>LUPA开源社区 hzd@l}Yp
  <div id="rightRail">Right Sidebar</div>
g!Jnz7Z.hIQ"Tl0</div>

CODE:LUPA开源社区YX1t/au|5~/jz/^Y8}

CSS:
9on'C9Xv;p
ROC0body{LUPA开源社区 @!?q3o u:}H7Yw*v
  margin:0 100px;
b(ZN6P$Jv
zk&X0i0  padding:0 200px 0 150px;
7`*E_6W/Eq$r0}
;q2a I5lA}F0#container{LUPA开源社区][*mC;o Vs,c
  background-color:#0ff;LUPA开源社区x K\w~f
  float:left;LUPA开源社区-]*D/sPK|5b-W t'Nb
  width:100%;    LUPA开源社区pp ID1pK:N}b
  border-left:150px solid #0f0;LUPA开源社区N#o@n X]B:|R
  border-right:200px solid #f00;LUPA开源社区7_lHCM3~*x
  margin-left:-150px;LUPA开源社区Cv`p7[T`3gjq^
  margin-right:-200px;LUPA开源社区%~Mu0p5t E0_c-I
  display:inline; /* So IE plays nice */
3O)Mo3q;S/y.m0\RD0}LUPA开源社区)mg+o1v'S8s
#leftRail{
*jNf)p~;Ks?Ef0  float:left;
@)v'@)K Nt u`B6A0@J0  width:150px;LUPA开源社区"H0dO+DCBf/p{
  margin-left:-150px;
)L.AVJuU\0  position:relative;LUPA开源社区V+s3].k I1H
}LUPA开源社区 `$zW$sZ
#center{
K(}XTcL*n0  float:left;LUPA开源社区fYB!r Xp'cCC
  width:100%;
] kg"h*_v1pj,@0  margin-right:-100%;LUPA开源社区+?Cw~4_jL
}
[_:i pUgCA0#rightRail{
N9W4l`'|+o0  float:right;
m)cdSV9nR S0~0  width:200px;
9n/_
nNxLn3Ax0  margin-right:-200px;LUPA开源社区8ZSi6o_mJ H
  position:relative;
M2n7[8O#bz#{2`]!?0}复制以下内容别存为*.html查看效果

CODE:LUPA开源社区bdX pZV

LUPA开源社区[
`6b1OCJ
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
(aB,A0FP,b4tF3o0<html xmlns="http://www.w3.org/1999/xhtml">
8F0|`vR:_u0<head>LUPA开源社区NZ6b4w
uUh*]
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
ZflJ:R4J"~#q0<title>css</title>
,I`-Bpu8u/h0<style type="text/css">LUPA开源社区+z$|$_+dl.v_Rg+Q4w
<!--LUPA开源社区4`Ijfd$X
body{LUPA开源社区T!yU"Fo v0Ay+w
  margin:0 100px;LUPA开源社区nj:v8i?KA
  padding:0 200px 0 150px;
9p9vuByP7c w'C4s0}LUPA开源社区fjw;uO(M
O
#container{LUPA开源社区R D9bwGs6e
  background-color:#0ff;LUPA开源社区N9D1k$FIs$N
  float:left;LUPA开源社区:z7}I(Fy
  width:100%;   
'Z-f!RYUM0  border-left:150px solid #0f0;LUPA开源社区U+Z;H)g)`
  border-right:200px solid #f00;
(XL
Nf0M(c0  margin-left:-150px;
KMv)FN(wS.Y%@&j9]`0  margin-right:-200px;LUPA开源社区+m)m"|-X!NQx?
  display:inline; /* So IE plays nice */
8a uWl Ga&P,^E']0}LUPA开源社区-f&fPIs!?Q+pu
#leftRail{
"x#?(Nu]L0  float:left;LUPA开源社区1n"]S7UEl~$Z7L:^
  width:150px;LUPA开源社区,QU U7KX$~#R5uu
  margin-left:-150px;
6[7k1Dvl2E0  position:relative;
vM#[4h9h:S!w&[ncy1c0}LUPA开源社区Y sx3RQm"x)x
#center{
+Z;oFVZq7H0  float:left;LUPA开源社区J/o_$gtAY4N P5?
  width:100%;LUPA开源社区}C4Xd]7Q1A
  margin-right:-100%;LUPA开源社区/g}$`n:h1C`
}
vnX_u]7K6_0#rightRail{LUPA开源社区+hNd VX$DI~
  float:right;
;o)~5}"?$\miGo-g.K0  width:200px;
,i C,Vnf0  margin-right:-200px;
5]&Ez.FQ"x"lf ?(P%vH]0  position:relative;
5jCR Br0}LUPA开源社区-R HF"dp
-->
R ck+B!M+P;F0</style>LUPA开源社区(whP;ny$C5OJ,B
</head>
KI#y8k k)Oh#b0<body>
~lG%A6gd[;m S5E3Z0<div id="container">
5l3yx%F2U5pj.s0  <div id="center">Center Column Content</div>
,Q/|$hm;@R.o6s;{0  <div id="leftRail">Left<br /> Sidebar</div>
Wg6c/uG3l4v3F0  <div id="rightRail">Right Sidebar</div>
u/@pAx*_0</div>LUPA开源社区)FMi,{ j@X
</body>
sT\jEwMzd+~5j0</html>[ 本帖最后由 loveb 于 2007-3-28 15:02 编辑 ]