- 首页
- 前端开发
- 当父母没有定义身高时，为什么百分比高度对孩子起作用?
当父母没有定义身高时，为什么百分比高度对孩子起作用?
[英] Why are percentage heights working on children when the parent has no height defined?
本文介绍了当父母没有定义身高时，为什么百分比高度对孩子起作用?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
为了简单起见，我使用 Bootstrap 4.
我的问题是:
- 为什么在 flex 项的子项 (
.inner) 上设置 100% 高度有效?对于此代码中的每个元素，高度都设置"为 auto. .inner 元素如何知道 100% 的高度是一行中最高的 flex 子元素 (.col-4) 的高度?
HTML:
<h3>内部元素没有 100% 的高度</h3><div class="row"><div class="col-4"><div class="inner">Lorem Ipsum 只是印刷和排版行业的虚拟文本.</div>
<div class="col-4"><div class="inner">内部</div>
<div class="col-4"><div class="inner">内部</div>
<div class="col-4"><div class="inner">内部</div>
<div class="col-4"><div class="inner">Lorem Ipsum 只是印刷和排版行业的虚拟文本.自 1500 年代以来，Lorem Ipsum 一直是行业标准的虚拟文本，当时一位不知名的印刷商使用了一个类型的厨房，并争先恐后地将其制作成一本类型样本书.</div>
<div class="容器"><h3>内部元素的高度为 100%</h3><div class="row"><div class="col-4"><div class="inner h-100">Lorem Ipsum 只是印刷和排版行业的虚拟文本.</div>
<div class="col-4"><div class="inner h-100">内部</div>
<div class="col-4"><div class="inner h-100">内部</div>
<div class="col-4"><div class="inner h-100">内部</div>
<div class="col-4"><div class="inner h-100">Lorem Ipsum 只是印刷和排版行业的虚拟文本.自 1500 年代以来，Lorem Ipsum 一直是行业标准的虚拟文本，当时一位不知名的印刷商使用了一个类型的厨房，并争先恐后地将其制作成一本类型样本书.</div>
CSS:
.inner {背景:#ddd;}h-100 {高度:100%；}
解决方案
为什么在 flex item 的 child (.inner) 上设置 100% height 有效?对于此代码中的每个元素，height 都设置"为 auto.
自 1990 年代开始使用 CSS 以来，流入子元素上的百分比高度要求父元素上定义高度.否则孩子默认为 height: auto.
父级唯一可接受的高度参考来自 height 属性.其他形式的高度，例如 min-height 和 max-height，已不能用于此目的.
尽管规范从未明确规定父级必须使用 height 属性 –仅使用了通用作品高度" –使用 height 属性已成为跨浏览器的传统解释和主要实现.
然而，近年来，浏览器扩大了对规范语言的解释，以包括其他形式的高度，例如 flex-basis.
因此，在 2017 年，height: 100% 在父没有指定 height 的所有情况下都不会解析为 height: auto 也就不足为奇了.
今天的浏览器也可能从 flex-grow、flex-basis、align-items 或其他东西中寻求高度参考.>
这里有一些关于 height 属性和百分比值的更多细节:
然后是干预:
<块引用>干预是指用户代理决定稍微偏离标准化行为以提供大大增强的用户体验.
浏览器制造商基本上是这样说的:感谢规范指导，但我们了解我们的用户，我们可以做得更好."所以他们跳出脚本希望更加周到和直观.
以下是 Chrome 可能干预的几个示例:
因此，在干预和对规则的更广泛解释之间，height: 100% 可能会给出完整的身高，即使父母没有定义height.
<块引用>.inner 元素如何知道 100% 的高度是一行中最高的 flex 子元素(.col-4)的高度?
他们没有.它们只是拉伸到容器的高度，容器的高度由行中最高的项目设置.
I'm using Bootstrap 4 for simplicity.
My questions are:
- Why setting 100% height on child (
.inner) of flex item works? For every element in this code height is "set" to auto.
- How
.inner elements know that 100% height is the height of the heighest flex child (.col-4) in a row?
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:
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:
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屋！
查看全文
