如何獲得一個div填補另一個DIV

Question

http://jsfiddle.net/eDYDD/

上面看到100％的高度是的jsfiddle這主要是解釋什麼，我試圖做的。我似乎無法讓#main_info填充#main的100％高度，因此邊框將填充div的100％，並且您知道，看起來不錯。任何幫助，將不勝感激。

Answer 1

在CSS中，除非父母具有固定身高，否則無法讓孩子填充其身高的100％，而不會產生任何欺騙。

1. 可以使用顯示錶使元素像表格一樣工作，確保子級填充父級。
2. 你可以這樣做，你的情況下，邊界權利是由父元素使用背景圖像進行可視化管理的。
3. 您可以使用JavaScript來維護這兩個元素的外觀。

這些適用於您的哪一項取決於您的使用案例。由於您的頭像信息現在只是一個邊框，因此在#main_info上創建可視邊框可能是最簡單的方法。

使用基於表的佈局也將解決這個問題很好，但需要額外的標記，以確保你有一個table元素，row元素和cell元素。

Answer 2

使用絕對定位。

#main { 
    position: relative; 
} 
#main_info { 
height: 100%; 
    position: absolute; 
} 

http://jsfiddle.net/eDYDD/3/

Answer 3

在Equal Height Columns with Cross-Browser CSS看看：

創建等高列與CSS並不容易，因爲它可能會開始看起來。本教程重點介紹了多列布局時出現的顯示問題，然後展示了適用於所有常見Web瀏覽器的簡單解決方案。這裏顯示的方法是100％CSS免費，無圖像和無JavaScript，所以它甚至可以在嚴格編碼的網站上使用。

Answer 4

我修改了你的jsfiddle。其他答案錯過了最簡單的解決方案，它是繼承父元素的min-height屬性：

#main_info { 
    width: 20%; 
    min-height: inherit; 
    border-right: 1px solid #E4E4E4; 
}