先看看等分的布局方案
1. float
兼容性较好（IE 8以上）
**2. flex **
兼容性较差（flex属于css3）
兼容性：IE8及以上
3. table
兼容性：可以兼容 IE 8
1. table
利用 table 的特性——每列等宽
2. flex
3. float
伪等高（只有背景显示高度相等），左右真实的高度其实不相等。 兼容性较好。
样式设置高度撑满整个页面，那么必须从最外层一层一层设置高度100%；代码如下：html,body,div{height:100%}
这里默认div是第三层，如果要撑满全页面的话，那么外层必须也是高度100%；
下面举个例子：
<html>
<head>
<style>
*{
padding:0
margin:0
box-sizing:border-box}
html,body,div{
height:100%
}
</style>
<body>
<div>高度全屏</div>
</body>
</html>
因为你使用了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>
