0

DIV自动高度解决方法

Posted in HTML DIV CSS at 四月 19th, 2009 / No Comments »

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

Published in HTML DIV CSS

No Responses to “DIV自动高度解决方法”

Leave a Reply

请输入算式结果(看不清请点击图片)
(必须)