當柳上原的風吹向天際的時候...

本文和大家重點討論一下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又使其回到底部開始的位置，同時，溢出部分隱藏掉了。此方法必須加文檔信息才能正常顯示
代碼： 

 
"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%}

     什么是HTTP長連接？ HTTP長連接，與一般每次發起http請求或響應都要建立一個tcp連接不同，http長連接利用同一個tcp連接處理多個http請求和響應，也叫 HTTP keep-alive，或者http連接重用。使用http長連接可以提高http請求/響應的性能。

     使用http長連接有很多好處，包括：
更少的建立和關閉tcp連接，可以減少網絡流量。 因為已建立的tcp握手，減少后續請求的延時。 長時間的連接讓tcp有充足的時間判斷網絡的擁塞情況，方便做出下步操作。

    這些優點在使用https連接時更顯著。可以減少多次建立高消耗的SSL/TLS握手。 在HTTP/1.1中，默認使用的是長連接方式。客戶端默認服務端會保持長連接，即便返回錯誤響應；除非明確指示不使用長連接。同時，協議中也指定了客戶 端可以發送關閉信號到服務端來關閉TCP連接。

    怎樣是連接可以重用？ 因為TCP是基于流的協議，所以HTTP協議需要有一種方式來指示前一個響應的結束和后一個響應的開始來重用已建立的連接。所以，它要求連接中傳輸的信息 必須有自定義的消息長度。自定義消息長度可以通過設置 Content-Length 消息頭，若傳輸編碼的實體內容塊，則每個數據塊的標明數據塊的大小，而且響應體也是以一個特殊的數據塊結束。

    若中間存在代理服務器將會如何? 因為長連接僅占用一條傳輸鏈路，所以代理服務器能否正確得與客戶端和服務器端（或者其他代理服務器）發送長連接或非長連接的信號尤為重要。但是HTTP的 客戶端或服務器端來看，代理服務器對他們來說是透明的，即便長連接是需要關注的。

     當前的JDK如何處理Keep-Alive？ JDK同時支持HTTP/1.1 和 HTTP/1.0。 當應用程序讀取完響應體內容后或者調用 close() 關閉了URLConnection.getInputStream()返回的流，JDK中的HTTP協議句柄將關閉連接，并將連接放到連接緩存中，以便后 面的HTTP請求使用。 對HTTP keep-Alive 的支持是透明的。但是，你也可以通過系統屬性http.keepAlive和http.maxConnections以及HTTP/1.1協議中的特定的 請求響應頭來控制。控制Keep-Alive表現的系統屬性有：
    http.keepAlive=<布爾值> 默認: true 指定長連接是否支持
    http.maxConnections=<整數> 默認: 5 指定對同一個服務器保持的長連接的最大個數。
    影響長連接的HTTP header是： Connection: close 如果請求或響應中的Connection header被指定為close，表示在當前請求或響應完成后將關閉TCP連接。

     JDK中的當前實現不支持緩存響應體，所以應用程序必須讀取完響應體內容或者調用close()關閉流并丟棄未讀內容來重用連接。此外，當前實現在清理連接時并未使用阻塞讀，這就意味這如果響應體不可用，連接將不能被重用。

    JDK1.5中的新特性 當應用接收到400或500的HTTP響應時，它將忽略IOException 而另發一個HTTP 請求。這種情況下，底層的TCP連接將不會再保持，因為響應內容還在等待被讀取，socket 連接未清理，不能被重用。應用可以在捕獲IOException 以后調用HttpURLConnection.getErrorStream() ，讀取響應內容然后關閉流。但是現存的應用沒有這么做，不能體現出長連接的優勢。為了解決這個問題，介紹下workaround。
當響應體的狀態碼大于或等于400的時候，workaround 將在一定時間內緩存一定數量的響應內容，釋放底層的socket連接來重用。基本原理是當響應狀態碼大于或等于400時，服務器端會發送一個簡短的響應體來指明連接誰以及如何恢復連接。

下面介紹一些SUN實現中的特定屬性來幫助接收到錯誤響應體后清理連接： 主要的一個是： sun.net.http.errorstream.enableBuffering=<布爾值> 默認: false

     當上面屬性設置為true后，在接收到響應碼大于或等于400是，HTTP 句柄將嘗試緩存響應內容。釋放底層的socket連接來重用。所以，即便應用不調用getErrorStream()來讀取響應內容，或者調用 close()關閉流，底層的socket連接也將保持連接狀態。
下面的兩個系統屬性是為了更進一步控制錯誤流的緩存行為： sun.net.http.errorstream.timeout=<int> in 毫秒 默認: 300 毫秒

     你如何做可以保持連接為連接狀態呢？ 不要忽略響應體而丟棄連接。這樣會是TCP連接閑置，當不再被引用后將會被垃圾回收器回收。 如果getInputStream()返回成功，讀取全部響應內容。如果拋出IOException ，捕獲異常并調用getErrorStream() 讀取響應內容（如果存在響應內容）。
即便你對響應內容不感興趣，也要讀取它，以便清理連接。但是，如果響應內容很長，你讀取到開始部分后就不感興趣了，可以調用close()來關閉流。值得注意的是，其他部分的數據已在讀取中，所以連接將不能被清理進而被重用。
下面是一個基于上面建議的代碼樣例：

　　如果你預先就對響應內容不感興趣，你可以使用HEAD 請求來代替GET 請求。例如，獲取web資源的meta信息或者測試它的有效性，可訪問性以及最近的修改。下面是代碼片段：