为了达到div自适应高度和左右等高的要求一般有4种方法: 1.视觉模拟背景,就是父容器套个背景,垂直循环,来模拟一个假象。就是A套BC,BC不足的部分用A的背景替代。 .side{overflow:hidden;background:#ddc;} .left{float:left;width:40%;} .right{float:right;width:60%;background:#cdd;} <div class="side"> <div class="left">left</div> <div class="right">right <br /> <br /> <br /> <br /> </div> </div> 2.JAVASCRIPT .main{overflow:hidden;background:#ddc;} .left{float:left;width:40%;} .right{float:right;width:60%;background:#cdd;} <div class="main"> <div class="left">left</div> <div class="right">right <br /> <br /> <br /> <br /> </div> </div> <mce:script type="text/javascript"> <!-- document.getElementById("right").style.height=document.getElementById("main").scrollHeight+"px"; document.getElementById("left").style.height=document.getElementById("main").scrollHeight-2+"px"; // --></mce:script> 3.正padding负margin,最大的弊端就是里面不能放置锚点,页面跳转如若遇到锚点,则锚点上方的页面不会被显示 .side{overflow:hidden;background:#ddc;} .left{float:left;width:40%;} .right{margin-bottom:-32767padding-bottom:32767float:right;width:60%;background:#cdd;} <div class="side"> <div class="left">left</div> <div class="right">right <br /> <br /> <br /> <br /> </div> </div> 4.相对位置法 <div style="border-right: solid 180px #f00; background: #000; color: #fff" mce_style="border-right: solid 180px #f00; background: #000; color: #fff"> <div style="width: 180px; float: right; position: relative; right: -180px;"> 右边的<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> </div> <div style="clear: both; height: 0; overflow: hidden;"> 左边的 </div> </div>