父DIV與最小高度和百分比高度的孩子無法正常工作

Question

我遇到了一個問題，一個div和它的子高度的最小高度。 我知道發生了什麼，但我不知道如何解決它。

我有這樣的HTML：

<div id="container"> 
<img src="#"/> 
<ul> 
<li></li> 
<li></li> 
<li></li> 
<li></li> 
</ul> 
</div> 

而且樣式表：

#container { min-height:180px; max-height:20%;} 
#container img { height:60%;} 
#container ul { height:40%; padding:10px;} 
#container ul li { height:100%; float:left;} 

我想要是適用於UL，母公司的40％。我得到的是UL獲得窗戶的高度，而不是它的父母。 如果我只放一個最大高度或一個固定高度，它就可以工作。

我supose的問題，通過創建或類似的東西的項目的時候卡梅斯，但我不知道原因的IMG需要其父的高度

任何解決方案？

我認爲最終我接近@ Jay-Bee-Why的解決方案，但我沒有得到它。

案例1 容器具有高度：180像素和最大高度：20％ 然後容器流動，其子女的最大高度，但對最低沒有限制的話，這個問題不就解決了

案例2- 容器具有最小高度，高度和最大高度 這裏只最小高度是working.For例如： #container的{最小高度：100像素;高度：180像素; max-height：20％} 這裏容器的高度從100px到180px不等。最大高度被省略。

正如我在評論中解釋的那樣，我正在尋找的是一個DIV，其高度從180px到窗口瀏覽器高度的20％，其中包含兩項。一個IMG，其父母高度的60％，以及一個內含40％的UL，有一個漂浮的LI，其父母身高爲100％。

Answer 1

你應該在你的問題中包括更多細節，包括工作圖像。但看看我的Fiddle here，你會看到一些可能的解釋。

1. 你申請height:100%到每個li元素。這意味着每個li都與其父元素ul一樣高。所以現在ul內的內容是ul本身的高度的4倍，因爲您有四個li其中每個大小的ul。在my Fiddle中，您可以看到滿足其父項的項目符號點。

2. 基於百分比的高度（或寬度）基於父母身高。您在文檔中指定的唯一高度是min-height:180px。在my Fiddle中您會注意到，在將父容器的實際高度（而非最小高度）應用到父容器之前，您所需的基於百分比的佈局未實現。如果沒有除height:auto之外的實際高度值，瀏覽器不確定如何計算基於百分比的高度。我應該注意到，寬度並非如此。如果您僅指定元素寬度的百分比，則瀏覽器知道將其計算結果置於瀏覽器窗口之外。