1、利用边距(margin)和补白(padding)实现div等高
<style type="text/css">
body,div,p{margin:0;padding:0;}
#wrap{overflow:hidden;width:1000px;margin:0 auto;}
#left,#center,#right{margin-bottom:-10000px;padding-bottom:10000px;}
#left{float:left;width:250px;background:#00FFFF;}
#center{float:left;width:500px;background:#FF0000;}
#right{float:right;width:250px;background:#00FF00;}
</style>
<div id="wrap">
<div id="left">
<p>left</p>
<p>left</p>
</div>
<div id="center">
<p>center</p>
</div>
<div id="right">
<p>right</p>
<p>right</p>
<p>right</p>
</div>
</div>
2、js方法实现等高、
<style type="text/css">
body,div,p{margin:0;padding:0;}
#wrap{overflow:hidden;width:1000px;margin:0 auto;}
#left{float:left;width:500px;background:#00FFFF;}
#right{float:right;width:500px;background:#00FF00;}
</style>
<div id="wrap">
<div id="left">
<p>left</p>
<p>left</p>
</div>
<div id="right">
<p>right</p>
<p>right</p>
<p>right</p>
</div>
</div>
<script type="text/javascript">
document.getElementById('left').style.height = document.getElementById('right').offsetHeight + 'px';
</script>
3、背景图欺骗-看似等高
如果左右2部分都有可平铺的背图,可以切一条铺早父元素上,父元素高度是随子元素延展的,看上去也等高了,如下图