HTML div元素沒有取得父母的身高，即使父母的身高不爲零

我有一個相當簡單的問題。我有一個三個孩子的集裝箱 - 兩個div和一張桌子。以下是CSS：HTML div元素沒有取得父母的身高，即使父母的身高不爲零

#container { 
    overflow: auto; 
} 
#child1 { 
    float: left; 
    width: 50px; 
    height: 100%; 
} 
#table1 { 
    float: left; 
} 
#child2 { 
    float: left; 
    width: 50px; 
    height: 100%; 
}

的HTML是非常簡單的，以及

<div id='container'> 
     <div id='child1'></div> 
     <table id='table1'> 
     <tbody></tbody> 
     </table> 
     <div id='child2'></div> 
    </div>

表有一些內容，設置它的高度。呈現頁面時，父容器div的高度設置爲表的高度，因爲它應該如此。然而，其他孩子由於某種原因正在崩潰。下面是示例，其中一些表格元素和樣式爲了清晰起見：http://jsfiddle.net/GUEc6/。如您所見，容器div的高度正確設置爲表格的高度，但child1和child2 div無法將其高度正確設置爲其高度的100％。我知道如果一個浮動元素的高度設置爲100％，那麼父元素需要對其自身的高度進行一些定義，這樣子元素可以是具體的100％。但它看起來並不像這裏發生的那樣。

來源

2014-01-29 dima1109

添加最小高度CHILD2次，然後將其設置 –

身高：100％的工作，「容器」需要有一個明確的高度集。不是這種情況。它的高度隱含地由其內容給出 - 即表格。 –

這可能有幫助：http://stackoverflow.com/questions/18362026/equalize-the-height-of-left-and-right-div-prevent-right-div-from-going-below-le/18362090#18362090 –

這是關於height: 100%的常見誤解。

從MDN：

百分率的計算相對於所述生成框的包含塊的高度。如果沒有明確規定包含塊的高度爲（即，其取決於內容高度），並且該元素沒有被絕對定位，則值計算爲自動。根元素上的百分比高度是相對於初始包含塊的相對。

您的問題的一個解決方案可能是絕對定位。在你的容器上設置position: relative並絕對放置孩子。在它們上面設置top: 0; bottom: 0;會將它們拉伸到容器的高度。

Quick Demo（顯示概念，你可能需要調整它）

來源

2014-01-29 15:17:18 kapa

這就是答案。 –

HTML div元素沒有取得父母的身高，即使父母的身高不爲零

回答

相關問題