CSS布局自适应高度解决方法

这是一个比较典型的三行二列布局，每列高度（事先并不能确定哪列的高度）的相同，是每个设计师追求的目标，按一般的做法，大多采用背景图填充、加JS脚本的方法使列的高度相同，本文要介绍的是采用容器溢出部分隐藏和列的负底边界和正的内补丁相结合的方法来解决列高度相同的问题。

G6P6K _u#u.O0

先看代码：若鄰博客9a5\r]xMQ

#wrap{

sT/G(w:HP,f0

overflow: hidden;

MJEP!Fu0

}

EE
K {G.yu0

#sideleft, #sideright{若鄰博客nCw B"m6C

padding-bottom: 32767px;

j|o6q$R,WM0

margin-bottom: -32767px; 若鄰博客GhN"?X8^q

}

q6|J2R2FD-R)u7y0

实现原理：若鄰博客(qk%mZ3B

块元素必须包含在一个容器里。

ZdWY6Od0

应用overflow: hidden 到容器里的元素。若鄰博客C8L2O*G4t"J

应用 padding-bottom（足够大的值）到列的块元素 。若鄰博客 `7U:A3yh7\Q.p

应用margin-bottom（足够大的值）到列的块元素。

gKU1X%?o)b!VP!M0

padding-bottom将列拉长变的一样高，而负的margin-bottom又使其回到底部开始的位置，同时，溢出部分隐藏掉了。若鄰博客'I-dE6rMA~

兼容各浏览器若鄰博客c]:a!a.s ]

IE Mac 5若鄰博客Jo;c{OY.^OF

得到高度正确，所以要过滤掉上面的代码。

Z AKayk0

/*\*/若鄰博客&q9t9V)L _2c

#sideleft, #sideright{若鄰博客qcFEod'C6l8[

padding-bottom: 32767px;若鄰博客Rc8O9F!xS.U X

margin-bottom: -32767px; 若鄰博客;kp3Q1~9a|

}

3ZI u8`h#Yl0

/**/

bD8MK$raw/u0

Opera

[]}#dt$f6Q*Wa0

1. Opera7.0-7.2不能正确清除溢出部分，所以要加：若鄰博客%U#Swl)@_

/* easy clearing */

Ho6uP B| GY;|z0

#wrap:after

Th6T`w(VGhw8[0

{

S(m)E$}"R0

content: '[DO NOT LEAVE IT IS NOT REAL]';

4vnS6gT&^0

display: block; 若鄰博客;oF&^s*WKS

height: 0; 若鄰博客CvR2Rp;R

clear: both;

g4p2CbP0

visibility: hidden;若鄰博客L:U^Vk,T/`X)Zor

}若鄰博客2UvNZ7t/z _Z

#wrap

5G!wKbj i eVl0

{若鄰博客(Ke(gu+||%a.X`

display: inline-block;若鄰博客&B? Mq%[p2t(D]b

}

eC1m|;E6Pv0

/*\*/若鄰博客 }z*Q-NN)|i z

#wrap若鄰博客x2u@W
j?mC$x

{

5NU'W2A/K6^Z0

display: block;

K1\6uRr0

}

gw^+U7w*V~ zsO0

/* end easy clearing */若鄰博客3_{^hx

/*\*/若鄰博客VS"d;\Lm4P

 

#m"^,bFlS-Dp0

2. Opera8处理overflow: hidden有个BUG,还得加上以下代码：若鄰博客z^.X n0i8{lNR

/*\*/若鄰博客,FUCbG1Y3OED4]

#sideleft, #sideright

j["W|d$^:kk0

{若鄰博客8Gagp5O2e

padding-bottom: 32767px !important;若鄰博客[XI:[Jlxe*|

margin-bottom: -32767px !important;

&A#sV!SL;I0

}

T\Vfz*a#}#F0

@media all and (min-width: 0px) {若鄰博客}BCsKw T

#sideleft, #sideright若鄰博客 SA*E~E

{

n.CV"}"b)v,R0

padding-bottom: 0 !important;若鄰博客j9[`8v4e)hUy#n

margin-bottom: 0 !important;

y.V(^,g O fF5Y9t&}G0

}若鄰博客8Q/K%m;GN{X3MT

#sideleft:before, #sideright:before

O-C6|%@ R7?J0

{若鄰博客 Y Bd8j z8U

content: '[DO NOT LEAVE IT IS NOT REAL]';

UT%O#nk{*JN0

display: block;

$^5TCI2Cz0T1C z0

background: inherit;

2s${,Xz)@_#FPK0

padding-top: 32767px !important;

/q"G uM B9M{ B0

margin-bottom: -32767px !important;

8t-@b%O$\Y3k3C0

height: 0;若鄰博客2sdA i uE

}若鄰博客1s f5H6j6j;s

}

r0V-T5m7|D
W-KoV0

/**/若鄰博客| ]w)x7KB u"B

3.Opera9的B2在修正8的bug.若鄰博客&{IM5M2j}1wx'm

测试环境：IE5.01、IE5.5、IE6.0、Firefox1.5、Opera8.5、Netscape 7.2通过。

!ZB;}.m
A5q+u*{0