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