因此，首先您要拥有W3C标准，这是针对浏览器制造商的一套准则。
然后，您便拥有了浏览器制造商，他们可以自由地做他们想做的任何事情（Internet Explorer的偏离历史证明了这一点）。
特别是，使用CSS百分比高度，浏览器之间的行为存在明显差异。
您已经发布了一个示例。这是另一个：
Flexbox中的百分比高度：Chrome / Safari与Firefox / IE
使用flexbox时，Chrome和Safari会根据父级
height属性的值来确定弹性项目的百分比高度。Firefox和IE11 /
Edge优先考虑父级的弹性高度。
Webkit浏览器似乎遵循该规范的更传统解释：
CSSheight
属性
percent
指定百分比高度。相对于生成的盒子的包含块的高度计算百分比。如果未明确指定包含块的高度，并且此元素未绝对定位，则该值将计算为“自动”。
自动
高度取决于其他属性的值。
换句话说，要使百分比高度适用于流入儿童，父级必须具有设定的高度。
这是规范的传统解释：术语“高度”表示
height属性的值。我自己的观点是，该语言含糊且易于解释，但是
height属性要求已成为主要的实现方式。在处理百分比值时，我从未见过
min-height或
max-height在父母身上工作过。
但是，最近，Firefox和IE也扩大了其解释范围，以接受高度变化。
知道哪些浏览器符合规范有点困难，因为正如我之前提到的，规范语言似乎含糊不清且易于解释。
随着定义的这一部分的最后一次更新是在1998年CSS2，以及新的高度形式（例如flexheight）的出现，似乎早就应该进行更新了。
我认为可以说，就百分比高度而言，在规范定义得到更新之前，您可以期望浏览器之间的呈现差异。
替代解决方案
希望子元素采用父元素的完整高度时，可以考虑以下两种选择。
display: flex
向父母申请。这会自动设置align-items: stretch
，告诉孩子扩展父级的全部可用高度。position: relative
在父母和position: absolute; height: 100%; width: 100%
孩子身上申请。使用绝对定位时，百分比高度将在父级上没有指定高度的情况下工作。
