为什么当父母没有定义身高时，百分比高度对孩子有效？ [英] Why are percentage heights working on children when the parent has no height defined?

问题描述

$ b

我的问题是：

1. 为什么要设置Flex项目的子项（ .inner ）的100％高度？对于此代码中的每个元素，高度都是设置为 auto 。


2. .inner 元素知道100％高度是连续最高弯曲孩子（ .col-4 ）的高度吗？

CODEPEN

HTML：

 < div class =container> 
< h3>在内部元素上没有100％的高度< / h3> 
< div class =row> 
< div class =col-4> 
< div class =inner> Lorem Ipsum只是印刷和排版行业的虚拟文本。< / div> 
< / div> 
< div class =col-4> 
< div class =inner>内部< / div> 
< / div> 
< div class =col-4> 
< div class =inner>内部< / div> 
< / div> 
< div class =col-4> 
< div class =inner>内部< / div> 
< / div> 
< div class =col-4> 
< div class =inner> Lorem Ipsum只是印刷和排版行业的虚拟文本。 Lorem Ipsum自从十六世纪以来一直是业界标准的虚拟文本，当时一台不知名的打印机拿了一个类型的厨房，把它打成一个样板书。< / div> 
< / div> 
< / div> 
< / div> 
 
< div class =container> 
< h3>内部元素的高度为100％< / h3> 
< div class =row> 
< div class =col-4> 
< div class =inner h-100> Lorem Ipsum只是印刷和排版行业的虚拟文本。< / 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只是印刷和排版行业的虚拟文本。 Lorem Ipsum自从十六世纪以来一直是业界标准的虚拟文本，当时一台不知名的打印机拿了一个类型的厨房，把它打成一个样板书。< / div> 
< / div> 
< / div> 
< / div> 
  

CSS：

  .inner {
 background：#ddd; 
} 
 h-100 {
 height：100％; 
 
 
 
 $ b $ div class =h2_lin>解决方案

为什么要在flex项目的子项（ .inner ）上设置100％ height ？对于这段代码中的每一个元素 height 都是设置为 auto 。
blockquote>

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

父对象的唯一可接受的高度引用来自 height 属性。其他形式的高度，例如 min-height 和 max-height ，已经为此失效了。尽管规范从未明确指定父级必须使用 height 属性– 只有通用作品height已被使用–使用 height 属性已成为跨浏览器的传统解释和主要实现。

近年来，浏览器已经扩大了他们对spec语言的解释以包括其他形式的高度，例如 flex-basis 。

在2017年，在所有情况下， height：100％不会解析为 height：auto 没有指定 height 。

今天的浏览器也可以从 flex- ， flex-basis ， align-items 或其他。

这里有一些关于高度属性和百分比值的更多细节：

• 为什么百分比高度不适用于我的div？


• Chrome浏览器不适用lling 100％flex父母身高


• 为什么我的div高度达到100％只有当DOCTYPE被删除？

然后有 干预措施 ：
$ b

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

这是浏览器厂商的基本说法：感谢spec的指导，但是我们知道我们的用户，我们可以做的更好 所以他们走的脚本希望更加周到和直观。

以下是一些可能的Chrome干预的例子：

• 为什么不能收缩过去的内容大小？


• 伪元素不在左上角对齐


• 如何使图像保持在CSS网格容器的行内


• Google Chrome浏览端口 - 用flexbox固定展开方向

因此，在干预和规则的更广泛的解释之间，即使当pa租金没有定义 height 。
$ b

inner 元素知道100％的高度是连续的最高flex子元素（ .col-4 ）的高度吗？

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

I'm using Bootstrap 4 for simplicity.

My questions are:

1. Why setting 100% height on child (.inner) of flex item works? For every element in this code height is "set" to auto.
2. How .inner elements know that 100% height is the height of the heighest flex child (.col-4) in a row?

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%;
}

解决方案

Why setting 100% height on child (.inner) of flex item works? For every element in this code height is "set" to auto.

Since the beginnings of CSS in the 1990s, a percentage height on an in-flow child element has required a defined height on the parent element. Otherwise the child defaults to height: auto.

The only acceptable height reference on the parent has come from the height property. Other forms of height, such as min-height and max-height, have been invalid for this purpose.

Although the spec has never explicitly specified that the parent must use the height property – only the generic work "height" has been used – using the height property has become the traditional interpretation and predominant implementation across browsers.

In recent years, however, browsers have broadened their interpretation of spec language to include other forms of height, such as flex-basis.

So, in 2017, it's not surprising that height: 100% does not resolve to height: auto in all cases where the parent has no specified height.

Today's browsers may also seek a height reference from flex-grow, flex-basis, align-items or something else.

Here a some more details about the height property and percentage values:

• Why is percentage height not working on my div?
• Chrome / Safari not filling 100% height of flex parent
• Why does my div height 100% work only when DOCTYPE is removed?

And then there are interventions:

An intervention is when a user agent decides to deviate slightly from a standardized behavior in order to provide a greatly enhanced user experience.

This is browsers makers basically saying: "Thanks for the spec guidance, but we know our users and we can do better." So they go off-script hoping to be more thoughtful and intuitive.

Here are several examples of possible Chrome interventions:

• Why doesn't flex item shrink past content size?
• pseudo element not aligning at top left corner
• How to make images stay within the rows of a css grid container?
• Google Chrome viewport-anchored expand direction with flexbox

So, between interventions and a broader interpretation of the rules, height: 100% may give full height even when the parent has no height defined.

How do .inner elements know that 100% height is the height of the highest flex child (.col-4) in a row?

They don't. They just stretch to the height of the container, who's height is set by the tallest item in the row.

这篇关于为什么当父母没有定义身高时，百分比高度对孩子有效？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！