1、如果父div不定义height、子div均为标准流的时候,父div的height随内容的变革而变革,实现父div高度随子div的高度改变而改变。
代码:
<styletypestyletype=\公众text/css\公众>
#aa{border:#000000solid5px}
#bb{border:#00ffffsolid5px;}
#cc{border:#0033CCsolid5px}
</< span>style>
<dividdivid=\公众aa\"大众>父div
<dividdivid=\公众bb\公众>子div</< span>div>
<dividdivid=\公众cc\"大众>子div</< span>div>
</< span>div>
效果:IE、FF下同等
2、如果父div定义height,子div均为标准流的时候,在IE下父div的height随内容变革而变革,ff中则固定大小,如父div设置height:50px
代码:
<styletypestyletype=\"大众text/css\公众>
#aa{border:#000000solid5px;height:50px}
#bb{border:#00ffffsolid5px;}
#cc{border:#0033CCsolid5px}
</< span>style>
<dividdivid=\"大众aa\公众>父div
<dividdivid=\公众bb\公众>子div</< span>div>
<dividdivid=\"大众cc\公众>子div</< span>div>
</< span>div>
IE效果
FF下效果
3、如果子div利用了float属性,此时已经分开标准流,父div不会随内容的高度变革而变革,办理的办法是在浮动的div下面,加一个空div,设置clear属性both
未加空div代码:
<styletypestyletype=\公众text/css\公众>
#aa{border:#000000solid5px;}
#bb{border:#00ffffsolid5px;float:left}
#cc{border:#0033CCsolid5px;float:left}
</< span>style>
<dividdivid=\公众aa\"大众>父div
<dividdivid=\"大众bb\"大众>子div</< span>div>
<dividdivid=\"大众cc\公众>子div</< span>div>
</< span>div>
IE效果:
FF效果:
修正后代码:
<styletypestyletype=\公众text/css\公众>
#aa{border:#000000solid5px;}
#bb{border:#00ffffsolid5px;float:left}
#cc{border:#0033CCsolid5px;float:left}
</< span>style>
<dividdivid=\公众aa\"大众>父div
<dividdivid=\"大众bb\"大众>子div</< span>div>
<dividdivid=\"大众cc\公众>子div</< span>div>
<divstyledivstyle=\"大众clear:both\公众></< span>div>
</< span>div>
修正后效果:IEFF同等
4.另类的DIV高度自适应
事理:
padding-bottom将列拉长变的一样高,而负的margin-bottom又使其回到底部开始的位置,同时,溢出部分隐蔽掉了。此方法必须加文档信息才能正常显示
代码:
\公众http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\公众>
<htmlxmlnshtmlxmlns=\"大众http://www.w3.org/1999/xhtml\"大众>
<styletypestyletype=\"大众text/css\公众>
#aa{border:#000000solid5px;overflow:hidden;}
#bb{border:#00ffffsolid5px;float:left;
padding-bottom:100000px;margin-bottom:-100000px;}
#cc{border:#0033CCsolid5px;float:left;
padding-bottom:100000px;margin-bottom:-100000px;}
#dd{float:left}
</< span>style>
<dividdivid=\"大众aa\"大众>
<dividdivid=\"大众bb\公众>子div</< span>div>
<dividdivid=\公众cc\"大众>子div</< span>div>
<dividdivid=\公众dd\"大众>子div<br/><br/><br/><br/><br/></< span>div>
</< span>div>
效果:
二、DIV高度自适应(子div高度随父亲div高度改变而改变)
在有边框的情形下,你会创造同一个div,在IE下的高度和在FF下的高度是不一样的,比如你设置了高度为100px的div,边框是border:5px;IE的高度是5+5+空缺区域=100px,而FF下高度是100px的div是不包括高度的,只是空缺区域的高度,如下图黑框的部分:
黑框的上方是对齐的,但是设置了同样的高度,效果却不一样,代码如下:
<styletypestyletype=\"大众text/css\"大众>
#aa{border:#000000solid5px;height:100px;}
#bb{border:#00ffffsolid5px;float:left;height:100%}
#cc{border:#0033CCsolid5px;float:left}
</< span>style>
<dividdivid=\公众aa\"大众>
<dividdivid=\公众bb\"大众>子div</< span>div>
<dividdivid=\"大众cc\公众>子div</< span>div>
</< span>div>
如果没有设置边框,完备没有高度不一致的情形,子div适应父div很大略,如上面代码,只是在子div加了height:100%属性即可。如果设置了边框,可以把子div的高度设置为比父div小高下边框高度的值,比如在此例中,可把#bb中height改为100-5-5=90px,结果在IE和Mozilla中显示同等。
有一点要把稳,如果父div是body的话,也便是说一个body套了一个div,让div适宜body的大小的,必须设置body的高度才能实现子div随body改变而改变,body{height:100%}
文/丁向明
做一个有博客的web前端自媒体人,专注web前端开拓,关注用户体验,加我qq/微信互换:6135833
http://dingxiangming.com