Diese Frage hat hier bereits eine Antwort:

Chrome / Safari füllt nicht 100% der Höhe des flexiblen Elternteils aus 4 Antworten

Ich habe gefunden, ob wir ein Block-Level-Element mit @ gesetzt habeheight:auto oderheight: 0~100% ohne die Höhe des übergeordneten Elements mit einem expliziten Wert einzurichten und das untergeordnete Element auf Blockebene einen unteren Rand hat, wird die Höhe in Chrome anders berechnet, jedoch nicht in Firefox. Für den Fall, dass @ gesetheight: 1%:

http: //codepen.io/anon/pen/BjgKM

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>

Die Höhe vondiv Block wird berechnet alsmargin-bottom + content height of p element. Ich bin verwirrt überwarum zumheight: 1% sollte als @ berechnet werdauto weil die übergeordneten Elemente html undbody tag) legt die Höhe nicht explizit fest, sondern hat eine andere Höhe, da wir die Höhe direkt auf @ setzeauto?

Wenn wir es direkt auf @ setzheight: auto, es wird nur die Höhe als die Höhe des untergeordneten Elements auf Blockebene festgelegt, wobei der untere Rand nicht berücksichtigt wird.

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>

Ich habe die CSS 2.1-Spezifikation gelesen und denke über meine Frage nach, die möglicherweise mit dem Thema "height" und "margin collapse" behandelt wird, kann aber immer noch nicht verstehen, warum es sich in Chrome ver anders verhält. 47.0.2526, obwohl Firefox ver. 44.0.2 zeigt die Höhe mit demselben Wert an.

Aufgeführte Referenzen:
https: //www.w3.org/TR/CSS2/visudet.html#the-height-propert

10.5: Prozentsatz

... Wenn die Höhe des enthaltenen Blocks nicht explizit angegeben wird (d. H. Von der Höhe des Inhalts abhängt) und dieses Element nicht absolut positioniert ist, wird der Wert mit "auto" berechnet. ...

10.6.3: Nicht ersetzte Elemente auf Blockebene im normalen Ablauf, wennoverflow berechnet zuvisible.

... wenn 'height' 'auto' ist, hängt die Höhe davon ab, ob das Element untergeordnete Elemente auf Blockebene hat und ob es über Auffüllungen oder Rahmen verfügt:

Die Höhe des Elements ist der Abstand vom oberen Rand des Inhalts zumzuerst zutreffend der folgenden

unterer Rand des letzten Zeilenrahmens, wenn der Rahmen einen Inline-Formatierungskontext mit einer oder mehreren Zeilen erstelltdie Unterkante des unteren (möglicherweise eingeklappten) Randes des letzten einfließenden untergeordneten Elements, wenn der Bo-Rand des untergeordneten Elements nicht mit dem unteren Rand des Elements zusammenfälltdie untere Randkante des letzten untergeordneten Elements, dessen oberer Rand nicht mit dem unteren Rand des Elements zusammenfällt Null, sonst

https: //www.w3.org/TR/2011/REC-CSS2-20110607/box.html#collapsing-margin

8.3.1 Reduzieren der Ränder.

Der obere Rand eines In-Flow-Block-Elements wird mit dem oberen Rand des ersten In-Flow-Block-Level-Childs reduziert, wenn das Element keinen oberen Rand, keine obere Polsterung und kein Freiraum für das Child hat.

Der untere Rand einer Inflow-Blockbox mit einer 'Höhe' von 'auto' und einer 'Mindesthöhe' von Null wird mit dem unteren Rand der letzten Inflow-Blockebene des untergeordneten Elements reduziert, wenn die Box keine untere Polsterung und aufweist Kein unterer Rand und der untere Rand des Kindes kollabiert nicht mit einem oberen Rand, der Spielraum hat.

... Wenn der obere und der untere Rand einer Box nebeneinander liegen, können die Ränder dadurch zusammenfallen. In diesem Fall hängt die Position des Elements von seiner Beziehung zu den anderen Elementen ab, deren Ränder reduziert werden.

Wenn die Ränder des Elements mit dem oberen Rand des übergeordneten Elements reduziert sind, wird der obere Rand des Felds als derselbe wie der des übergeordneten Elements definiert.Andernfalls nimmt entweder das übergeordnete Element nicht am Randeinbruch teil, oder es ist nur der untere Rand des übergeordneten Elements betroffen. Die Position der oberen Randkante des Elements ist die gleiche, wie sie wäre, wenn das Element einen unteren Rand ungleich Null hätte.