本文和大家重點(diǎn)討論一下DIV高度自適應(yīng)及注意問(wèn)題，主要包括父div高度隨子div的高度改變而改變和子div高度隨父親div高度改變而改變兩種情況。

DIV高度自適應(yīng)及注意問(wèn)題

積累了一些經(jīng)驗(yàn)，總結(jié)出一些關(guān)于div高度自適應(yīng)的技巧，希望有助于大家，轉(zhuǎn)載請(qǐng)標(biāo)明出處，謝謝。

一、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.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}  
style> 
<dividdivid="aa"> 
<dividdivid="bb">子divdiv> 
<dividdivid="cc">子divdiv> 
<dividdivid="dd">子div<br/><br/><br/><br/><br/>div> 
div> 
 

效果：

#p#

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

在有邊框的情況下，你會(huì)發(fā)現(xiàn)同一個(gè)div,在IE下的高度和在FF下的高度是不一樣的，比如你設(shè)置了高度為100px的div，邊框是border:5px;IE的高度是5+5+空白區(qū)域=100px，而FF下高度是100px的div是不包括高度的，只是空白區(qū)域的高度，如下圖黑框的部分:

黑框的上方是對(duì)齊的，但是設(shè)置了同樣的高度，效果卻不一樣，代碼如下：

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

如果沒(méi)有設(shè)置邊框，完全沒(méi)有高度不一致的情況，子div適應(yīng)父div很簡(jiǎn)單，如上面代碼，只是在子div加了height:100%屬性即可。如果設(shè)置了邊框，可以把子div的高度設(shè)置為比父div小上下邊框高度的值，比如在此例中，可把#bb中height改為100-5-5＝90px，結(jié)果在IE和Mozilla中顯示一致。

有一點(diǎn)要注意，如果父div是body的話，也就是說(shuō)一個(gè)body套了一個(gè)div，讓div適合body的大小的，必須設(shè)置body的高度才能實(shí)現(xiàn)子div隨body改變而改變，body{height:100%}

【編輯推薦】

1. 三種有效解決DIV高度自適應(yīng)的方法
2. IE6、IE7、Firefox中margin問(wèn)題解決辦法
3. DIV布局規(guī)范中CSS類及id命名方式
4. CSS兼容：解決IE6、IE7和IE8的兼容問(wèn)題妙招
5. 將XHTML+CSS頁(yè)面轉(zhuǎn)換為打印機(jī)頁(yè)面技巧