DIV自动高度解决方法2007-05-31 22:50解决DIV自动高度有好几种办法,小弟这里介绍2种常用的办法,当然适合IE6 FF IE7 OP 其他浏览器我没有试过
第一是clear(清除),第二种是overflow和height的自动高度AUTO;
代码
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<title>div自动高度</title>
<style type=”text/css”>
<!–
.line{ border: 1px dashed #333;}
.con {margin:auto; background-color:#FFFFCC;}
.top{ height:200px; width:80%; background-color:#eee; margin:0 auto 10px auto;}
.cl{ clear:both;}
.con1 { overflow:auto; height:auto;margin:auto; background-color:#FFFFCC;}
.top1{ height:200px; width:80%; background-color:#eee; margin:0 auto;}
–>
</style>
</head>
<body>
<h4>利用clear自动高度,因为TOP层有下边界</h4>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<h4>利用overflow和高度的自动高度实现,无下边界的情况</h4>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
http://hi.baidu.com/webdivcss/blog/item/f3fe96006ad5ea86e950cd8b.html