自适应高度的问题，采用 Div ＋ CSS 进行三列或二列布局时，事先不知道任意列的具体高度，只能根据内容的增减自适应高度，要使每列的高度相同，用 Table 很容易实现，但采用 Div ＋ CSS 就显得比较麻烦了。按照一般的做法，大都采用背景图填充或 JS 脚本的方法使高度相同，但这些都不是最好的办法。 本文要介绍的是采用容器“正内补丁(列的正内补丁)”和“负外补丁(列的负底边界)”结合的方法来解决列高度相同的问题。 主要代码： #container{overflow:hidden} /*外容器*/ #sidebar_left,#sidebar_right{padding-bottom:100000pxmargin-bottom:-100000px} /*列*/ 实现原理： 块元素必须包含在一个容器里。 应用overflow: hidden 到容器里的元素。 应用padding-bottom（足够大的值）到列的块元素 。 应用margin-bottom（足够大的值）到列的块元素。 padding-bottom将列拉长变的一样高，而负的margin-bottom又使其回到底部开始的位置，同时，溢出部分隐藏掉了。 兼容各浏览器 IE Mac 5 得到高度正确，所以要过滤掉上面的代码。 /**/ #sidebar_left, #sidebar_right{ padding-bottom: 32767pxmargin-bottom: -32767px } /**/ Opera 1. Opera7.0-7.2不能正确清除溢出部分，所以要加： /* easy clearing */ #container:after { /*content: '[DO NOT LEAVE 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 !importantmargin-bottom: -32767px !important } @media all and (min-width: 0px) { #sidebar_left, #sidebar_right { padding-bottom: 0 !importantmargin-bottom: 0 !important } #sidebar_left:before, #sidebar_right:before { /*content: '[DO NOT LEAVE IT IS NOT REAL]'*/ display: blockbackground: inheritpadding-top: 32767px !importantmargin-bottom: -32767px !importantheight: 0} } 本文来自CSDN博客，转载请标明出处： http://blog.csdn.net/skyaspnet/archive/2008/03/25/2217382.aspx
可以通过JQ来获取右边高度再付值给左边。这样，右边内容再多，JQ也能把它的高度付值给左边，这样就会两边一样。
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
//判断控制页面初始时左右的高度一致
var hl = $(".left").outerHeight() //获取左侧left层的高度
var hr = $(".right").outerHeight() //获取右侧right层的高度
var mh = Math.max(hl,hr) //比较hl与hr的高度，并将最大值赋给变量mh
$(".left").height(mh) //将left层高度设为最大高度mh
$(".right").height(mh) //将right层高度设为最大高度
</script>
还可以通过一些滚动插件：比如jQuery Scrollbars等，，，两边设置一致高度，然后右边多出来的内容就会出现一个滚动条，下拉来显示。
还可以设置左右两边高度一致，右边加上禁止溢出。。这样做，如果右边内容多出来了就不会显示出来，，
看你需要哪种，，
css3 的display：flex可以实现。
demo：
html结构
<div class="flex-box">
<div class="col">
<p>左侧内容</p>
</div>
<div class="col">
<p>右侧内容</p><p>右侧内容</p>
</div>
</div>
样式
<style>
.flex-box {
display: -webkit-flex
display: -ms-flexbox
display: flex
overflow: hidden
color:white
}
.flex-box>.col{
flex: 1
padding: 20px
}
.flex-box>.col:first-child {
background: red
-webkit-order: 1
-ms-flex-order: 1
order: 0
}
.flex-box >.col:last-child {
background: black
-webkit-order: 0
-ms-flex-order: 0
order: 1
}
</style>
