div+css左右列高度自适应

自适应高度的问题，采用 Div ＋ CSS 进行三列或二列布局时，事先不知道任意列的具体高度，只能根据内容的增减自适应高度，要使每列的高度相同，用 Table 很容易实现，但采用 Div ＋ CSS 就显得比较麻烦了。按照一般的做法，大都采用背景图填充或 JS 脚本的方法使高度相同，但这些都不是最好的办法。
本文要介绍的是采用容器“正内补丁(列的正内补丁)”和“负外补丁(列的负底边界)”结合的方法来解决列高度相同的问题。
主要代码：
#container{overflow:hidden;} /*外容器*/
#sidebar_left,#sidebar_right{padding-bottom:100000px;margin-bottom:-100000px;} /*列*/
实现原理：
块元素必须包含在一个容器里。
应用overflow: hidden 到容器里的元素。
应用 padding-bottom（足够大的值）到列的块元素 。
应用margin-bottom（足够大的值）到列的块元素。
padding-bottom将列拉长变的一样高，而负的margin-bottom又使其回到底部开始的位置，同时，溢出部分隐藏掉了。
兼容各浏览器
IE Mac 5
得到高度正确，所以要过滤掉上面的代码。
/**/
#sidebar_left, #sidebar_right{
padding-bottom: 32767px;
margin-bottom: -32767px;
}
/**/
Opera
1. Opera7.0-7.2不能正确清除溢出部分，所以要加：
/* easy clearing */
#container:after
{
/*content: '[DO NOT LE***E IT IS NOT REAL]'; */
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#container
{
display: inline-block;
}
/**/
#container
{
display: block;
}
/* end easy clearing */
/**/
2. Opera8处理overflow: hidden有个BUG,还得加上以下代码：
/**/
#sidebar_left, #sidebar_right
{
padding-bottom: 32767px !important;
margin-bottom: -32767px !important;
}
@media all and (min-width: 0px) {
#sidebar_left, #sidebar_right
{
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
#sidebar_left:before, #sidebar_right:before
{
/*content: '[DO NOT LE***E 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、Opera9、Netscape 7.2通过。

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/skyaspnet/archive/2008/03/25/2217382.aspx