潮人街

 html:

<div id="container">
    <div id="leftSide">
        <p>aaaa</p>
        <p>aaaa</p>
    </div> 
    <div id="rightSide">bbb</div>
</div>

1、使用display:table; 利用的table本身的自适应特性，兼容性好，容易使用

#container{width:500px; display: table;}
#leftSide,#rightSide{display: table-cell;}
#leftSide{width:80%; background:blue; }
#rightSide{width:20%; background:green;}

2、负外补丁和正内补丁{margin-bottom:-(num)px;padding-bottom:(num)px;}相结合

#container{
   width:500px; margin:10px auto; overflow:hidden; font-size:14px;
}
#leftSide,#rightSide{
   padding-bottom:9999px; margin-bottom:-9995px; color:#fff;
}
#leftSide{
   width:195px; float:left; background:blue; line-height:20px; padding-left:5px;
}
#rightSide{
   width:300px; float:left; background:green; line-height:20px;
}

3、利用javascript脚本实现动态设置高度

var left = document.getElementById('leftSide');  

var right = document.getElementById('rightSide');  

if(left.offsetHeight>=right.offsetHeight){  

    right.style.height=left.offsetHeight+'px';  

}else{  

    left.style.height=right.offsetHeight+'px';  

}