一、DIV高度自適應(yīng)（父div高度隨子div的高度改變而改變）

1、如果父div不定義height、子div均為標(biāo)準(zhǔn)流的時(shí)候，父div的height隨內(nèi)容的變化而變化,實(shí)現(xiàn)父div高度隨子div的高度改變而改變。

代碼： 

    
<styletypestyletype="text/css"> 
    
#aa{border:#000000solid5px}  
    
#bb{border:#00ffffsolid5px;}  
    
#cc{border:#0033CCsolid5px}  
    
style> 
    
<dividdivid="aa">父div  
    
<dividdivid="bb">子divdiv> 
    
<dividdivid="cc">子divdiv> 
    
div> 

效果：IE、FF下一致

2、如果父div定義height,子div均為標(biāo)準(zhǔn)流的時(shí)候，在IE下父div的height隨內(nèi)容變化而變化，ff中則固定大小，如父div設(shè)置height:50px

代碼： 

    
<styletypestyletype="text/css"> 
    
#aa{border:#000000solid5px;height:50px}  
    
#bb{border:#00ffffsolid5px;}  
    
#cc{border:#0033CCsolid5px}  
    
style> 
    
<dividdivid="aa">父div  
    
<dividdivid="bb">子divdiv> 
    
<dividdivid="cc">子divdiv> 
    
div> 

IE效果

FF下效果

3、如果子div使用了float屬性，此時(shí)已經(jīng)脫離標(biāo)準(zhǔn)流，父div不會(huì)隨內(nèi)容的高度變化而變化，解決的辦法是在浮動(dòng)的div下面，加一個(gè)空div，設(shè)置clear屬性both

未加空div代碼： 

    
<styletypestyletype="text/css"> 
    
#aa{border:#000000solid5px;}  
    
#bb{border:#00ffffsolid5px;float:left}  
    
#cc{border:#0033CCsolid5px;float:left}  
    
style> 
    
<dividdivid="aa">父div  
    
<dividdivid="bb">子divdiv> 
    
<dividdivid="cc">子divdiv> 
    
div> 

IE效果：

FF效果：

修改后代碼： 

    
<styletypestyletype="text/css"> 
    
#aa{border:#000000solid5px;}  
    
#bb{border:#00ffffsolid5px;float:left}  
    
#cc{border:#0033CCsolid5px;float:left}  
    
style> 
    
<dividdivid="aa">父div  
    
<dividdivid="bb">子divdiv> 
    
<dividdivid="cc">子divdiv> 
    
<divstyledivstyle="clear:both">div> 
    
div> 

修改后效果：IEFF一致

4.另類的DIV高度自適應(yīng)
原理:
padding-bottom將列拉長(zhǎng)變的一樣高，而負(fù)的margin-bottom又使其回到底部開(kāi)始的位置，同時(shí)，溢出部分隱藏掉了。此方法必須加文檔信息才能正常顯示
代碼： 

    


    
 
    
"http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    
<htmlxmlnshtmlxmlns="http://www./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}  
    
style> 
    
<dividdivid="aa"> 
    
<dividdivid="bb">子divdiv> 
    
<dividdivid="cc">子divdiv> 
    
<dividdivid="dd">子div<br/><br/><br/><br/><br/>div> 
    
div> 
    
 

效果：