css左右等高问题

先看看预览效果：http://lgdy.whut.edu.cn/index.php?c=home&a=detail&id=3394

再来谈谈css左右等高的应用场景：在内容管理系统（cms）中的文章详细页面，布局是左侧导航和右侧文章内容，右侧内容区域高度是可变的并且会随着文字的增加而发生改变。这个时候如何通过css实现左右等高呢？

解决方案当然是有挺多中的，可以使用css，也可以使用js。js实现基本思路就是当DocumentContentLoaded事件执行完毕后，通过比较左侧、右侧区域的高度。然后将高度较大的值记录下来，并且赋值给高度较小的区域。

前端开发中一个重要准则是：能用css解决的问题就不用js去解决。

下面给出利用css解决左右等高的具体方案：（负margin策略）

<div id="wrap">
  <div id="main">
    <div id="left"></div>
    <div id="right"></div>
  </div>
</div>

　　

#main {overflow:hidden;} 

#left {float:left;
       margin-bottom: -9999px;
       padding-bottom: 9999px;
      } 

#right {float:left;
        margin-bottom: -9999px;
        padding-bottom: 9999px;
       }