html左右两栏高度相同,DIV+CSS左右两列自适应高度的方法

我们在用DIV+CSS布局网页的时候，必然会遇到左右两列自适应高度的问题，就是左边列的背景会随着右边列内容的增加也相应的增加高度，下面就教大家DIV+CSS左右两列自适应高度的方法。

下面给出最终的效果图：

具体代码如下所示：html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

DIV+CSS左右两列自适应高度的方法-HTMer

.main{500px;overflow:hidden;}

.left{width:100px;background-color:#0CC;margin-bottom:-9999px;padding-bottom:9999px;float:left;}

.right{width:400px;background-color:#F00;float:left;}

左侧内容1

右侧内容1
右侧内容2
右侧内容3

说明：其实解决DIV+CSS左右两列高度自适应的方法就是要注意两点：一是在最外层加上overflow:hidden，然后在左边列加上margin-bottom:-9999px;padding-bottom:9999px;即可。