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

Question

我发现，如果我们设定一个块级元素有height:auto或height:0~100%没有成立家长与明确价值高，它的块级的孩子有底部边缘，那么它会在不同的浏览器计算的高度，但不能在Firefox。对于设置的情况height: 1%：

html {

  background: pink;

}



body {

  background: yellow;

}



div {

  height: 1%;

}



inner {

  margin-bottom: 30px;

  margin-top: 20px;

}


<div>

  <p class="inner">block level element</p>

</div>

div块的高度将计算为margin-bottom + content height of p element。我对 为什么height:1%应该计算auto``html``body``auto感到困惑 ， 因为父元素（ 和
标签）没有显式设置其高度，而是具有不同的高度，因为我们直接将高度设置为 ？

如果我们直接将其设置为height: auto，它将显然只是将高度设置为其子块级元素的高度，这不包括其底边距。

html {

  background: pink;

}



body {

  background: yellow;

}



div {

  height: auto;

}



inner {

  margin-bottom: 30px;

  margin-top: 20px;

}


<div><p class="inner">block level element</p></div>

我已经阅读了CSS 2.1规范，并考虑了我的问题可能涉及到height属性和margin崩溃主题，但是仍然无法理解为什么它在Chrome
ver中的行为有所不同。47.0.2526，尽管Firefox版本为。44.0.2将显示相同的高度。

• 10.5：百分比

…如果未明确指定包含块的高度（即，它取决于内容的高度），并且该元素的位置不是绝对的，则该值将计算为“自动”。…

• 10.6.3：overflow计算为时，正常流程中的块级不可替换元素visible。

…如果’height’为’auto’，则高度取决于元素是否具有任何块级子元素以及其是否具有填充或边框：

元素的高度是从其顶部内容边缘到以下 第一个适用 边缘的距离：

1. 如果最后一个行框的底部边缘建立了一个或多个行的内联格式设置上下文
2. 如果最后一个流入子项的底边距的底边（可能是塌陷）的底边，如果子项的底边距不随元素的底边距而塌陷
3. 最后一个流入子项的底边界边缘，该子项的顶边距不随元素的底边距折叠
4. 零，否则

• 8.3.1利润下降。

如果元素没有顶部边框，没有顶部填充且子元素没有间隙，则流入块元素的顶部边缘将以其第一个流入块级子元素的顶部边缘折叠。

如果框没有底部填充且没有，则“高度”为“自动”且“最小高度”为零的流入块盒的底部边距以其最后一个流入块级子级的底部边距折叠底边框和孩子的底边距不会因具有间隙的顶边距而折叠。

…如果框的顶部和底部边距相邻，则边缘可能会塌陷。在这种情况下，元素的位置取决于其与其边距被折叠的其他元素的关系。

 * 如果元素的边距与父级的上边距折叠在一起，则框的顶部边框边缘将定义为与父级的相同。
 * 否则，要么元素的父级不参与边距崩溃，要么仅涉及父级的底边距。元素的顶部边框边缘的位置与元素的底部边框非零时的位置相同。

Answer 1

因此，首先您要拥有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）的出现，似乎早就应该进行更新了。

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

替代解决方案

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

1. display: flex向父母申请。这会自动设置align-items: stretch，告诉孩子扩展父级的全部可用高度。

2. position: relative在父母和position: absolute; height: 100%; width: 100%孩子身上申请。使用绝对定位时，百分比高度将在父级上没有指定高度的情况下工作。