Question

基本上，我给父容器一个50％的最小高度，子容器的高度为50％。我在父容器中放了很多文本，所以它会扩展为60％。我尝试了高度：1px技巧。那没起效。基本上，儿童容器保持在父母最小身高的50％（即50％），而不是父母实际身高的50％（例如60％）。

＆＃13;

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

＆＃13;

<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>

＆＃13;

编辑：

这样做的一个应用是创建一个整页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

如果...没有告诉你，那么无法解决。

如果不打破常规流程并使您的尺寸相对于可以计算的内容，则无法缓解此问题。

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

1 个答案: