具有百分比最小高度的子容器，具有百分比高度的子容器，不起作用

Question

基本上，我給父容器的最小高度爲50％，子容器的高度爲50％。我在父容器中放了很多文本，所以它會擴大到60％。我試過的高度：1px技巧。它不起作用。基本上，兒童容器保持在父母的最小高度（即50％）的50％而不是父母的實際身高的50％（例如60％）。

html, 
 
body { 
 
    height: 100%; 
 
} 
 
#parent { 
 
    width: 50%; 
 
    height: 1px; 
 
    min-height: 50%; 
 
    background-color: yellow; 
 
} 
 
#child { 
 
    background-color: red; 
 
    height: 50%; 
 
}

<div id="parent"> 
 
    dsds dsfdsf sdffds sddfsdsds dsfdsf sdffds sddfsdsds dsfdsf sdffds sddfsdsds dsfdsf sdffds sddfsdsds dsfdsf sdffds sddfsdsds dsfdsf sdffds sddfsdsds dsfdsf sdffds sddfsdsds dsfdsf sdffds sddfsdsds dsfdsf sdffds sddfsdsds dsfdsf sdffds sddfsdsds dsfdsf 
 
    sdffds sddfsdsds dsfdsf sdffds sddfsdsds dsfdsf sdffds sddfsdsds dsfdsf sdffds sddfsdsds dsfdsf sdffds sddfsdsds dsfdsf sdffds sddfsdsds dsfdsf sdffds 
 
    <div id="child"> 
 
    Hello World! 
 
    </div> 
 
</div>

編輯：

這方面的一個應用是創建一個被允許時，有一個溢流成長一整頁的div（即最小高度100％）。此整頁div可以包含上述場景中描述的具有百分比高度的子容器（例如非絕對或固定標題）。

Answer 1

你不能這麼做，原因很簡單：你的#child實際上是擴展你的父母 - 它是內容的一部分。您可能會注意到，如果您給父母身高爲relative，並且孩子身高爲absolute，則50%確實工作。但那是因爲你的內容已被排除在正常流程之外。

你可以用來證明這種行爲的唯一合乎邏輯的理由是試圖用數學方法解決它。假設我們有p，這是父母身高，e這是除了孩子以外的內容的高度。這使得兒童身高c，或h/2。計算孩子身高的公式將爲此是：

var c = (e + c)/2 

，你解決不了的，因爲它會變成這樣：

var c = (e + (e + (e + (e + ...)/2)/2)/2)/2 

其中，如果...不告訴你，是無法解決的。

如果不從常規流程中斷開並使您的大小相對於可以計算的東西，則無法緩解此問題。