首页 >> 技术文章 >> 详细内容
div+css布局自动适应高度的解决办法

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

发布者:admin 发布时间:2010/8/27 阅读:4345

Baidu
Copyright © 2002-2021 467.Cn All rights reserved    南京华昊网络技术有限公司    版权所有
备案序号:苏ICP备13052121号    ISP经营许可证:苏B2-20080166    ICP/SP经营许可证:苏B2-20130350      苏公网安备 32011102010099号
地址:南京市江北新区大桥北路77号电信大楼5楼    电话:025-58633651(8线)  13913852884  传真:025-58497310    E-mail:467cn@163.com    邮编:210032
网址:Www.467.Cn    QQ在线支持:点击这里给我发消息 点击这里给我发消息