DIV高度自適應以及應該注意的問題有哪些

本篇文章給大家分享的是有關DIV高度自適應以及應該注意的問題有哪些，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

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

DIV高度自適應及注意問題

積累了一些經驗，總結出一些關于div高度自適應的技巧，希望有助于大家，轉載請標明出處，謝謝。

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

1、如果父div不定義height、子div均為標準流的時候，父div的height隨內容的變化而變化,實現父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均為標準流的時候，在IE下父div的height隨內容變化而變化，ff中則固定大小，如父div設置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屬性，此時已經脫離標準流，父div不會隨內容的高度變化而變化，解決的辦法是在浮動的div下面，加一個空div，設置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高度自適應
原理:
padding-bottom將列拉長變的一樣高，而負的margin-bottom又使其回到底部開始的位置，同時，溢出部分隱藏掉了。此方法必須加文檔信息才能正常顯示
代碼：

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"   "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>

效果：

二、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}   style>  <dividdivid="aa">  <dividdivid="bb">子divdiv>  <dividdivid="cc">子divdiv>  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%}

以上就是DIV高度自適應以及應該注意的問題有哪些，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。