text's blog

003三行二列布局，每列高度（事先并不能确定哪列的高度）的相同，是每个设计师追求的，采用容器溢出部分隐藏和列的负底边界和正的内补丁相结合的方法来解决列高度相同的问题。

代码：
#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;}}
/**/
IE5.01、IE5.5、IE6.0、Firefox1.5、Opera8.5、Netscape 7.2测试通过。

Tags:网页  网站  设计  HTML