原作者:Alex Robinson

原文标题:Equal Height Columns

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

先看代码：

#wrap{

overflow: hidden;

}

#sideleft, #sideright{

padding-bottom: 32767px;

margin-bottom: -32767px;

}

实现原理：

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

应用overflow: hidden 到容器里的元素。

应用 padding-bottom(足够大的值)到列的块元素 。

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

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

兼容各浏览器

IE Mac 5

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

/*\*/

#sideleft, #sideright{

padding-bottom: 32767px;

margin-bottom: -32767px;

}

/**/

Opera

1. Opera7.0-7.2不能正确清除溢出部分，所以要加：

/* easy clearing */

#wrap:after

{

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

display: block;

height: 0;

clear: both;

visibility: hidden;

}

#wrap

{

display: inline-block;

}

/*\*/

#wrap

{

display: block;

}

/* end easy clearing */

/*\*/

2. Opera8处理overflow: hidden有个BUG,还得加上以下代码：

/*\*/

#sideleft, #sideright

{

padding-bottom: 32767px !important;

margin-bottom: -32767px !important;

}

@media all and (min-width: 0px) {

#sideleft, #sideright

{

padding-bottom: 0 !important;

margin-bottom: 0 !important;

}

#sideleft:before, #sideright:before

{

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

display: block;

background: inherit;

padding-top: 32767px !important;

margin-bottom: -32767px !important;

height: 0;

}

}

/**/

3.Opera9的B2在修正8的bug.

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

最终效果:

运行代码框

Equal height(DIV+CSS布局中自适应高度的解决方法)

body{

padding: 0;

margin: 0;

font-size: 12px;

font-family: Arial, Helvetica, sans-serif;

line-height: 140%;

text-align: center;

background:#E7DFD3;

}

#wrap{

width: 750px;

margin: 0 auto;

overflow: hidden;

}

#header{

background: #E8E8E8;

}

#sideleft{

width: 580px;

float: left;

background: #FFF;

text-align: left;

}

#sideright{

width: 170px;

float: left;

background: #F0F0F0;

text-align: left;

}

/* easy clearing */

#wrap:after

{

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

display: block;

height: 0;

clear: both;

visibility: hidden;

}

#wrap

{

display: inline-block;

}

/*\*/

#wrap

{

display: block;

}

/* end easy clearing */

/*\*/

#sideleft, #sideright

{

padding-bottom: 32767px !important;

margin-bottom: -32767px !important;

}

@media all and (min-width: 0px) {

#sideleft, #sideright

{

padding-bottom: 0 !important;

margin-bottom: 0 !important;

}

#sideleft:before, #sideright:before

{

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

display: block;

background: inherit;

padding-top: 32767px !important;

margin-bottom: -32767px !important;

height: 0;

}

}

/**/

#footer{

background: #E8E8E8;

width: 100%;

float: left;

}

h1,h2,address,p{

margin: 0;

padding: .8em;

}

h1,h2{font-size: 20px;}

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

出处：蓝色理想

责任编辑：moby

◎进入论坛网页制作、网站综合版块参加讨论