CODEPEN

HTML：

<div class="container">
  <h3>Without 100% height on inner elements</h3>
  <div class="row">
    <div class="col-4">
      <div class="inner">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
    </div>
    <div class="col-4">
      <div class="inner">Inner</div>
    </div>
    <div class="col-4">
      <div class="inner">Inner</div>
    </div>
    <div class="col-4">
      <div class="inner">Inner</div>
    </div>
    <div class="col-4">
      <div class="inner">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
    </div>
  </div>
</div>

<div class="container">
  <h3>With 100% height on inner elements</h3>
  <div class="row">
    <div class="col-4">
      <div class="inner h-100">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
    </div>
    <div class="col-4">
      <div class="inner h-100">Inner</div>
    </div>
    <div class="col-4">
      <div class="inner h-100">Inner</div>
    </div>
    <div class="col-4">
      <div class="inner h-100">Inner</div>
    </div>
    <div class="col-4">
      <div class="inner h-100">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
    </div>
  </div>
</div>

CSS：

.inner {
  background: #ddd;
}
h-100 {
  height: 100%;
}

Answer 1

为什么在Flex项目的子项（height）上设置100％.inner？对于此代码中的每个元素height都是＆＃34; set＆＃34;到auto。

自20世纪90年代CSS开始以来，in-flow子元素的百分比高度需要在父元素上定义一个高度。否则，孩子默认为height: auto。

父级唯一可接受的高度引用来自height属性。其他形式的高度（例如min-height和max-height）无法用于此目的。

虽然规范从未明确指定父级必须使用height属性 - only the generic work "height" has been used - 使用height属性已成为跨浏览器的传统解释和主要实现。

然而，近年来，浏览器扩大了对规范语言的解释，以包括其他形式的高度，例如flex-basis。

因此，2017年，在父母没有指定height: 100%的所有情况下height: auto无法解析为height并不奇怪。

今天的浏览器也可以从flex-grow，flex-basis，align-items或其他内容中寻找高度参考。

以下是有关height属性和百分比值的更多详细信息：

然后有interventions：

干预是指用户代理决定稍微偏离标准化行为以提供极大增强的用户体验。

这是浏览器制造商基本上说的：＆＃34;感谢规范指导，但我们了解我们的用户，我们可以做得更好。＆＃34; 所以他们离开脚本希望更加周到和直观。

以下是可能的Chrome干预措施的几个示例：

因此，在干预措施和对规则的更广泛解释之间，即使父母没有定义height: 100%，height也可以提供完整的高度。

.inner元素如何知道100％高度是连续最高儿童（.col-4）的高度？

他们没有。它们只是伸展到容器的高度，容器的高度由行中最高的项目设置。

当父级没有定义高度时，为什么百分比高度适用于儿童？

CODEPEN

1 个答案: