DIV自动调整高度有好几种办法，这里介绍2种常用的办法,兼容IE6 FF IE7
第一是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 class="con line">
<div class="top line"></div>
<div class="top line"></div>
<div class="top line"></div>
<div class="top line"></div>
<div class="top line"></div>
<div class="top line"></div>
<div class="cl"></div>
</div>
<h4>利用overflow和高度的自动高度实现，无下边界的情况</h4>
<div class="con1 line">
<div class="top1 line"></div>
<div class="top1 line"></div>
<div class="top1 line"></div>
<div class="top1 line"></div>
<div class="top1 line"></div>
<div class="top1 line"></div>
</div>
</body>
</html>
外加一个最小高度min-height:500px;
南京服务器托管 | 南京企业建站 | 南京网站建设 | 南京网站优化 | 南京中绘谷网络技术有限公司 | 467.cn
| 整理发布 | TEL：13913852884，025-58633651，QQ：21390019
苏公网安备 32011102010099号
