日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
DIV高度自適應及應該注意的問題

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

成都創(chuàng)新互聯(lián)公司主要從事成都網(wǎng)站設(shè)計、網(wǎng)站制作、網(wǎng)頁設(shè)計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務。立足成都服務寶安,十年網(wǎng)站建設(shè)經(jīng)驗,價格優(yōu)惠、服務專業(yè),歡迎來電咨詢建站服務:18982081108

DIV高度自適應及注意問題

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

一、DIV高度自適應（父div高度隨子div的高度改變而改變）

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

代碼： 

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2. #aa{border:#000000solid5px}  
    3. 
  
  
  
  
  3. #bb{border:#00ffffsolid5px;}  
    4. 
  
  
  
  
  4. #cc{border:#0033CCsolid5px}  
    5. 
  
  
  
  
  5.  style> 
    6. 
  
  
  
  
  6. 父div  
    7. 
  
  
  
  
  7. 子div div> 
    8. 
  
  
  
  
  8. 子div div> 
    9. 
  
  
  
  
  9.  div> 
    10.

 效果：IE、FF下一致

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

代碼： 

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2. #aa{border:#000000solid5px;height:50px}  
    3. 
  
  
  
  
  3. #bb{border:#00ffffsolid5px;}  
    4. 
  
  
  
  
  4. #cc{border:#0033CCsolid5px}  
    5. 
  
  
  
  
  5.  style> 
    6. 
  
  
  
  
  6. 父div  
    7. 
  
  
  
  
  7. 子div div> 
    8. 
  
  
  
  
  8. 子div div> 
    9. 
  
  
  
  
  9.  div> 
    10.

 IE效果

FF下效果

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

未加空div代碼： 

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2. #aa{border:#000000solid5px;}  
    3. 
  
  
  
  
  3. #bb{border:#00ffffsolid5px;float:left}  
    4. 
  
  
  
  
  4. #cc{border:#0033CCsolid5px;float:left}  
    5. 
  
  
  
  
  5.  style> 
    6. 
  
  
  
  
  6. 父div  
    7. 
  
  
  
  
  7. 子div div> 
    8. 
  
  
  
  
  8. 子div div> 
    9. 
  
  
  
  
  9.  div> 
    10.

 IE效果：

FF效果：

修改后代碼： 

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2. #aa{border:#000000solid5px;}  
    3. 
  
  
  
  
  3. #bb{border:#00ffffsolid5px;float:left}  
    4. 
  
  
  
  
  4. #cc{border:#0033CCsolid5px;float:left}  
    5. 
  
  
  
  
  5.  style> 
    6. 
  
  
  
  
  6. 父div  
    7. 
  
  
  
  
  7. 子div div> 
    8. 
  
  
  
  
  8. 子div div> 
    9. 
  
  
  
  
  9.  div> 
    10. 
  
  
  
  
  10.  div> 
    11.

 修改后效果：IEFF一致

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

 
 
 
 
    
  
  
  
  
  1. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    4. 
  
  
  
  
  4.  
    5. 
  
  
  
  
  5.  
    6. 
  
  
  
  
  6. #aa{border:#000000solid5px;overflow:hidden;}  
    7. 
  
  
  
  
  7. #bb{border:#00ffffsolid5px;float:left;  
    8. 
  
  
  
  
  8. padding-bottom:100000px;margin-bottom:-100000px;}  
    9. 
  
  
  
  
  9. #cc{border:#0033CCsolid5px;float:left;  
    10. 
  
  
  
  
  10. padding-bottom:100000px;margin-bottom:-100000px;}  
    11. 
  
  
  
  
  11. #dd{float:left}  
    12. 
  
  
  
  
  12.  style> 
    13. 
  
  
  
  
  13.  
    14. 
  
  
  
  
  14. 子div div> 
    15. 
  
  
  
  
  15. 子div div> 
    16. 
  
  
  
  
  16. 子div




     div> 
    17. 
  
  
  
  
  17.  div> 
    18. 
  
  
  
  
  18.  
    19.

效果：

#p#

二、DIV高度自適應（子div高度隨父親div高度改變而改變）

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

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

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3. #aa{border:#000000solid5px;height:100px;}  
    4. 
  
  
  
  
  4.  
    5. 
  
  
  
  
  5. #bb{border:#00ffffsolid5px;float:left;height:100%}  
    6. 
  
  
  
  
  6.  
    7. 
  
  
  
  
  7. #cc{border:#0033CCsolid5px;float:left}  
    8. 
  
  
  
  
  8.  
    9. 
  
  
  
  
  9.  style> 
    10. 
  
  
  
  
  10.  
    11. 
  
  
  
  
  11.  
    12. 
  
  
  
  
  12.  
    13. 
  
  
  
  
  13. 子div div> 
    14. 
  
  
  
  
  14.  
    15. 
  
  
  
  
  15. 子div div> 
    16. 
  
  
  
  
  16.  
    17. 
  
  
  
  
  17.  div> 
    18.

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

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

【編輯推薦】

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

本文名稱：DIV高度自適應及應該注意的問題
分享路徑：http://www.5511xx.com/article/dpjehep.html