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

1、頁(yè)眉內(nèi)容 DIV 高度自適應(yīng)及應(yīng)該注意的問(wèn)題 (1) 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 的高度改變而改變。 代碼： 1. 2. #aaborder:#000000solid5px 3. #bbborder:#00ffffsolid5px; 4. #ccbor

2、der:#0033CCsolid5px 5. /style 6. 父 div 7. 子 div /div 8. 子 div /div 9. /div 效果： IE、FF 下一致 2、如果父 div 定義 height, 子 div 均為標(biāo)準(zhǔn)流的時(shí)候，在 IE 下父 div 的 height 隨內(nèi) 容變化而變化， ff 中則固定大小，如父 div 設(shè)置 height:50px 代碼： 10. 11. #aaborder:#000000solid5px;height:50px 12. #bbborder:#00ffffsolid5px; 13. #ccborder:#0033CCsolid5px

3、14. /style 15. 父 div 16. 子 div /div 17. 子 div /div 18. /div IE 效果 1 頁(yè)腳內(nèi)容 頁(yè)眉內(nèi)容 FF下效果 3、如果子 div 使用了 float 屬性，此時(shí)已經(jīng)脫離標(biāo)準(zhǔn)流， 化而變化，解決的辦法是在浮動(dòng)的 div 下面，加一個(gè)空 div ， 未加空 div 代碼： 19. 20. #aaborder:#000000solid5px; 21. #bbborder:#00ffffsolid5px;float:left 22. #ccborder:#0033CCsolid5px;float:left 23. /style 24. 父 di

4、v 25. 子 div /div 26. 子 div /div 27. /div IE 效果： FF效果： 修改后代碼： 28. 29. #aaborder:#000000solid5px; 30. #bbborder:#00ffffsolid5px;float:left 31. #ccborder:#0033CCsolid5px;float:left 32. /style 33. 父 div 34. 子 div /div 35. 子 div /div 36. /div 37. /div 修改后效果： IEFF 一致 4. 另類(lèi)的 DIV 高度自適應(yīng) 原理: padding-bottom 將列

5、拉長(zhǎng)變的一樣高， 而負(fù)的 margin-bottom 同時(shí)，溢出部分隱藏掉了。此方法必須加文檔信息才能正常顯示 代碼： div 不會(huì)隨內(nèi)容的高度變 設(shè)置 clear 屬性 both 又使其回到底部開(kāi)始的位置， 38. /xhtml1/DTD/xhtml1-transitional.dtd 2 頁(yè)腳內(nèi)容 頁(yè)眉內(nèi)容 39. 40. 41. #aaborder:#000000solid5px;overflow:hidden; 42. #bbborder:#00ffffsolid5px;float:left; 43. padding-bottom:100000px;margin-bottom:-100

6、000px; 44. #ccborder:#0033CCsolid5px;float:left; 45. padding-bottom:100000px;margin-bottom:-100000px; 46. #ddfloat:left 47. /style 48. 49. 子 div /div 50. 子 div /div 51. 子 div /div 52. /div 效果： 二、 DIV 高度自適應(yīng)（子 div 高度隨父親 div 高度改變而改變） 在有邊框的情況下， 你會(huì)發(fā)現(xiàn)同一個(gè) div, 在 IE 下的高度和在 FF 下的高度是不一樣的， 比如你設(shè)置了高度為 100px 的 di

7、v ，邊框是 border:5px;IE 的高度是 5+5+空白區(qū)域 =100px ， 而 FF 下高度是 100px 的 div 是不包括高度的，只是空白區(qū)域的高度，如下圖黑框的部分 : 黑框的上方是對(duì)齊的，但是設(shè)置了同樣的高度，效果卻不一樣，代碼如下： 1. 2. #aaborder:#000000solid5px;height:100px; 3. #bbborder:#00ffffsolid5px;float:left;height:100% 4. #ccborder:#0033CCsolid5px;float:left 5. /style 6. 7. 子 div /div 8. 子 div /div 9. /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 中顯示一致。 3 頁(yè)腳內(nèi)容 頁(yè)眉內(nèi)容 有一點(diǎn)