Chrome和Firefox中的Heights呈现方式有所不同

Chrome和Firefox中的Heights呈现方式有所不同

因此，首先您要拥有W3C标准，这是针对浏览器制造商的一套准则。

然后，您便拥有了浏览器制造商，他们可以自由地做他们想做的任何事情（Internet Explorer的偏离历史证明了这一点）。

特别是，使用CSS百分比高度，浏览器之间的行为存在明显差异。

您已经发布了一个示例。这是另一个：

Flexbox中的百分比高度：Chrome / Safari与Firefox / IE

使用flexbox时，Chrome和Safari会根据父级

height

属性的值来确定d性项目的百分比高度。Firefox和IE11 /
Edge优先考虑父级的d性高度。

Webkit浏览器似乎遵循该规范的更传统解释：

CSS

height

属性

percent
指定百分比高度。相对于生成的盒子的包含块的高度计算百分比。如果未明确指定包含块的高度，并且此元素未绝对定位，则该值将计算为“自动”。

自动
高度取决于其他属性的值。

换句话说，要使百分比高度适用于流入儿童，父级必须具有设定的高度。

这是规范的传统解释：术语“高度”表示

height

属性的值。我自己的观点是，该语言含糊且易于解释，但是

height

属性要求已成为主要的实现方式。在处理百分比值时，我从未见过

min-height

或

max-height

在父母身上工作过。

但是，最近，Firefox和IE也扩大了其解释范围，以接受高度变化。

知道哪些浏览器符合规范有点困难，因为正如我之前提到的，规范语言似乎含糊不清且易于解释。

随着定义的这一部分的最后一次更新是在1998年CSS2，以及新的高度形式（例如flexheight）的出现，似乎早就应该进行更新了。

我认为可以说，就百分比高度而言，在规范定义得到更新之前，您可以期望浏览器之间的呈现差异。

---

替代解决方案

希望子元素采用父元素的完整高度时，可以考虑以下两种选择。

1. display: flex

   向父母申请。这会自动设置

   align-items: stretch

   ，告诉孩子扩展父级的全部可用高度。

2. position: relative

   在父母和

   position: absolute; height: 100%; width: 100%

   孩子身上申请。使用绝对定位时，百分比高度将在父级上没有指定高度的情况下工作。