div高度不是父母身高的100％

Question

我正在建立一個網站，包裝的左側有一個信息部分。 包裝器高度設置為100％，信息的左div設置為100％，但是高度不是100％，它是自動的，我該如何設置，所以我的左div高度等於包裝器div的高度？

CSS：

#wrapper {
    background:url(../images/wrap_bg.png);
    width: 1240px;
    min-height:100%;
    overflow: hidden;
    margin-left:auto;
    margin-right:auto;
}
#wrapper #left {
    width:295px;
    height:100%;
    min-height:100%; 
    border-right: 1px dotted #fefbfb; 
    padding: 0 0 0 10px;
    float: left;
}

HTML：

<div id="wrapper">
    <div id="left">some text</div>
</div>

這是我所擁有的http://jsfiddle.net/xD96D/

Answer 1

min-height百分比值是相對於包含框的高度，而#wrapper元素（容器）沒有明確的height值。

因此，左div min-height屬性的100%值計算為0 。

從MDN

min-height

相對於生成的盒子的包含塊的高度計算百分比。 如果未明確指定包含塊的高度（即，它取決於內容的高度），並且該元素的位置不是絕對的，則將百分比值視為0。

您應該為父母使用height: 100%來獲得min-height: 100%為孩子們工作要達到min-height: 100% 。

工作演示 。

Answer 2

如果父級的身高也設置為100％，或者設置為靜態值（例如100像素），則只能將高度設置為100％。

看看Hashem Qolami的答案。 他在解釋問題上做得更好，並舉了一個例子。