这个问题在这里已有答案：
起源
答案:
首先，您有W3C标准，这是浏览器制造商的一套指南。
然后你就拥有了浏览器制造商，他们可以随心所欲地做任何事情（由Internet Explorer的偏差历史证明）。
特别是，对于CSS百分比高度，浏览器之间的行为存在明显差异。
你发布了一个例子。这是另一个：
Flexbox中的百分比高度：Chrome / Safari与Firefox / IE
使用flexbox时，Chrome和Safari会根据父级的值解析弹性项目的百分比高度 height 属性。 Firefox和IE11 / Edge优先考虑父级的弹性高度。
Webkit浏览器似乎遵循对规范的更传统的解释：
百分比
指定百分比高度。百分比是根据生成的框的包含块的高度计算的。如果未明确指定包含块的高度且此元素未绝对定位，则该值将计算为“auto”。汽车
高度取决于其他属性的值。
换句话说，对于在流入子项上工作的百分比高度，父项必须具有设置的高度。
这是对规范的传统解释：术语“高度”意味着该值的价值 height 属性。我个人认为，这种语言含糊不清，可以解释，但是 height 财产要求已成为主要的实施。我从未见过 min-height 要么 max-height 在处理百分比值时处理父项。
然而，最近，Firefox和IE扩大了他们的解释，以接受弹性高度。
Firefox和IE的示例使用父级的弹性高度作为子级百分比高度的参考：
- Chrome会忽略列布局中的flex-basis
- Chrome / Safari不会填充100％高度的flex父级
- Chrome中的flexbox项目中的高度不正确
- Chrome中的Flexbox - 如何限制嵌套元素的大小？
知道哪些浏览器符合规范有点困难，因为正如我之前提到的那样，规范语言似乎含糊不清并且易于解释。
最后一次更新这部分定义是在1998年（CSS2），以及新的高度形式如弯曲高度的出现，更新似乎早就应该了。
我认为公平地说，当涉及到百分比高度时，在规范定义获得更新之前，您可以预期浏览器之间的渲染差异。
替代方案
当希望子元素占据父元素的全高时，可以考虑以下两种方法。
应用
display: flex到了父母。这会自动设定align-items: stretch，告诉孩子扩展父母的完整可用高度。应用
position: relative在父母和position: absolute; height: 100%; width: 100%对孩子。使用绝对定位，百分比高度将在父级上没有指定高度的情况下工作。
答案:
首先，您有W3C标准，这是浏览器制造商的一套指南。
然后你就拥有了浏览器制造商，他们可以随心所欲地做任何事情（由Internet Explorer的偏差历史证明）。
特别是，对于CSS百分比高度，浏览器之间的行为存在明显差异。
你发布了一个例子。这是另一个：
Flexbox中的百分比高度：Chrome / Safari与Firefox / IE
使用flexbox时，Chrome和Safari会根据父级的值解析弹性项目的百分比高度 height 属性。 Firefox和IE11 / Edge优先考虑父级的弹性高度。
Webkit浏览器似乎遵循对规范的更传统的解释：
百分比
指定百分比高度。百分比是根据生成的框的包含块的高度计算的。如果未明确指定包含块的高度且此元素未绝对定位，则该值将计算为“auto”。汽车
高度取决于其他属性的值。
换句话说，对于在流入子项上工作的百分比高度，父项必须具有设置的高度。
这是对规范的传统解释：术语“高度”意味着该值的价值 height 属性。我个人认为，这种语言含糊不清，可以解释，但是 height 财产要求已成为主要的实施。我从未见过 min-height 要么 max-height 在处理百分比值时处理父项。
然而，最近，Firefox和IE扩大了他们的解释，以接受弹性高度。
Firefox和IE的示例使用父级的弹性高度作为子级百分比高度的参考：
- Chrome会忽略列布局中的flex-basis
- Chrome / Safari不会填充100％高度的flex父级
- Chrome中的flexbox项目中的高度不正确
- Chrome中的Flexbox - 如何限制嵌套元素的大小？
知道哪些浏览器符合规范有点困难，因为正如我之前提到的那样，规范语言似乎含糊不清并且易于解释。
最后一次更新这部分定义是在1998年（CSS2），以及新的高度形式如弯曲高度的出现，更新似乎早就应该了。
我认为公平地说，当涉及到百分比高度时，在规范定义获得更新之前，您可以预期浏览器之间的渲染差异。
替代方案
当希望子元素占据父元素的全高时，可以考虑以下两种方法。
应用
display: flex到了父母。这会自动设定align-items: stretch，告诉孩子扩展父母的完整可用高度。应用
position: relative在父母和position: absolute; height: 100%; width: 100%对孩子。使用绝对定位，百分比高度将在父级上没有指定高度的情况下工作。