我们在用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
右侧内容2
右侧内容3
说明:其实解决DIV+CSS左右两列高度自适应的方法就是要注意两点:一是在最外层加上overflow:hidden,然后在左边列加上margin-bottom:-9999px;padding-bottom:9999px;即可。