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

Question

基本上，我将父容器的最小高度设置为 50%，将子容器的高度设置为 50%。我在父容器中放置了很多文本，所以它会扩展到 60%。我尝试了 height: 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，它在溢出时允许增长(即 min-height 100%)。这个完整的页面 div 可以包含一个子容器(例如，一个非绝对或固定的标题)，其高度如上文所述。

Answer 1

您不能这样做的原因很简单:您的 #child实际上是扩展你的 parent - 它是内容的一部分。你可能会注意到，如果你给你的 parent 一个 relative高度，和 child 一个absolute高度，50% 确实有效。但那是因为您的内容已脱离常规流程。

可以用来证明这种行为合理的简单逻辑原因是尝试用数学方法解决它。假设我们有 p ，这是 parent 的高度，e这是除 child 以外的内容的高度。这使得 c child 高度，或 h / 2 .因此，计算 child 高度的方程式为:

var c = (e + c) / 2

你无法解决的，因为它变成了这个:

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

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

如果不打破常规流程并使您的尺寸与可以计算的东西相关，就无法缓解这个问题。