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;
}

 

你可能感兴趣的:(css)