Question

根据css specification on min/max-height，如果我没有为包含块提供固定高度，则任何百分比min-height值都将被视为0。我有以下示例显示这可能是通过一些怪癖实现的，或者我错过了一些非常明显的事情。

我希望通过此布局实现的目标

2列布局，容器具有动态高度，具体取决于列高度
左栏应浮在右栏上方
左列和右列都应获得最大列（align-items: stretch）

＆＃13;

p {
  /*Comment out to display more content*/
  display: none;
}

.floating-panel-content {
  position: relative;
  z-index: 1;
  background: rgba(0, 100, 0, 0.9);
  float: left;
  width: 100px;

  /*Why does this work? I didn't provide any explicit height.*/
  min-height: 100%;
}


.container {
  display: flex;
  width: 300px;
  outline: 1px solid red;
  align-items: stretch;
}

.main-panel {
  background: blue;
}

img {
  display: block;
}

.floating-panel {
  flex: 0 0 0;
  width: 0;
}

＆＃13;

<div class="container">
  <div class="floating-panel">
    <div class="floating-panel-content">
      Floating content
      <p>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Atque maxime aperiam saepe, quia error reiciendis dolorem! Natus facere aliquam sit quisquam, mollitia debitis ullam assumenda atque beatae saepe labore ab.
      </p>
    </div>
  </div>
  <div class="main-panel">
    <img src="http://placehold.it/300x300">
  </div>
</div>
Some content after .container

＆＃13;

Answer 1

您写道：

根据css specification on min/max-height，如果我没有为包含块提供固定高度，则任何百分比min-height值都将被视为0。

这是100％正确的。这就是规范所说的。

<强> <percentage>

指定用于确定已使用值的百分比。百分比   是根据生成的框的高度计算的   包含块。如果包含块的高度不是   明确指定（即，它取决于内容高度），以及这个   元素没有绝对定位，处理百分比值   作为0（适用于min-height）或none（适用于max-height）。

https://www.w3.org/TR/CSS22/visudet.html#min-max-heights

您写道：

我有以下示例显示这是通过一些怪癖实现的，或者我错过了一些非常明显的事情。

也正确。你没有遗漏任何东西，但是你已经走上了正确的轨道，而且有些怪癖和＃34;。

多年来，主流浏览器在百分比高度上严格遵守规范语言。换句话说，如果没有在父级上明确定义height，则子级的百分比高度将无法按预期工作。根据{{1}}，auto或0的相应规则，它将解析为none或height或min-height。

然而，近年来，大多数主流浏览器放松了他们的解释，现在接受其他形式的高度 - 例如弹性高度 - 作为可接受的父级参考。

唯一似乎继续严格解释的浏览器是Safari。在父项上没有定义的高度（使用max-height属性），子项的百分比高度将失败。

自1998年以来height属性定义尚未更新（CSS2），这无济于事。随着多种新方法的出现，这种定义已经彻底过时了。浏览器制造商似乎并没有等待W3C的更新。

有关详细信息和示例，请参阅：Chrome / Safari not filling 100% height of flex parent

为什么最小高度百分比在没有容器高度的情况下工作？

1 个答案: