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

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 

其中，如果...不告诉你，是无法解决的。

如果不从常规流程中断开并使您的大小相对于可以计算的东西，则无法缓解此问题。