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

在修改webbyps.info的主题时，遇到了之前没有想到的问题，而问题的根源就是左右两栏的高度自适应问题，纠结。。。。但最终还是找到了解决的方法。比较无语的是，之前我知道，但就是没想到。

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

先看代码：

#wrap{
 overflow: hidden;
 }

#sideleft, #sideright{
 padding-bottom: 32767px;
 margin-bottom: -32767px;
 }

实现原理：

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

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

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

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

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