先看看等分的布局方案
1. float
兼容性较好（IE 8以上）
**2. flex **
兼容性较差（flex属于css3）
兼容性：IE8及以上
3. table
兼容性：可以兼容 IE 8
1. table
利用 table 的特性——每列等宽
2. flex
3. float
伪等高（只有背景显示高度相等），左右真实的高度其实不相等。 兼容性较好。
可以通过js实现两个div自适应同等高度，如下：先设置div+css 基本布局：
<div id="mm">
<div id="mm1">左边</div>
<div id="mm2">右边</div>
</div>
js 实现 div 自适应高度
代码如下：
<script type="text/javascript">
<!--
window.onload=window.onresize=funct {
if document.getElementByIdx_x "mm2" .clientHeight<document.getElementByIdx_x "mm1" .clientHeight {
document.getElementByIdx_x "mm2" .style.height=document.getElementByIdx_x "mm1" .offsetHeight+"px"
}
else{
document.getElementByIdx_x "mm1" .style.height=document.getElementByIdx_x "mm2" .offsetHeight+"px"
}
}
-->
</script>
因为你使用了float，所以left和right都已经不在正常的流中了，所以他们之间的以及父元素之间的高度都是互相独立的。所以要想不使用javascript，而又要这两者之间有关系的话就不能使用float。
通常要进行准确的布局都是通过table来解决
参考下，必要的时候给left和right设置宽度
<div id="container" style="display:tablewidth:100%">
<div id="left" style="background-color: reddisplay:table-cell">
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
内容<br>
</div>
<div style="display:table-cell"></div>
<div id="right" style="background-color: bluedisplay:table-cell">内容</div>
</div>
