Warum füllt mein untergeordnetes Div nicht 100 % der Höhe aus, wenn das übergeordnete Element nur „min-height' hat?

Höhen- und Prozentberechnungen in Eltern-Kind-Elementen

Beachten Sie die folgende HTML- und CSS-Einrichtung:

<div class="container">
  <div class="child">
  </div>
</div>

.container {
  background-color: red;
  width: 500px;
  min-height: 300px;
}

.child {
  background-color: blue;
  width: 500px;
  height: 100%;
}

Kindgröße reagiert nicht

Wann Das Containerelement hat einen Mindesthöhenwert, die Höhe des untergeordneten Elements bleibt trotz der 100 %-Angabe 0. Wenn Sie jedoch die Höhe des Containerelements auch nur auf einen kleinen Wert wie 1 Pixel festlegen, kann das untergeordnete Element den Container füllen.

Verstehen des Verhaltens

Der Grund dafür Verhalten liegt in der Natur der Höhenberechnungen in CSS. Wenn ein übergeordnetes Element keine explizit definierte Höhe hat (z. B. im Fall von min-height), wird seine Höhe durch seinen Inhalt bestimmt. In diesem Fall ist sein Inhalt das untergeordnete Element.

Die Höhe des untergeordneten Elements, die auf 100 % gesetzt ist, wird jedoch relativ zur Höhe seines enthaltenden Blocks berechnet. Da der enthaltende Block (das übergeordnete Element) keine explizit angegebene Höhe hat, kann die Höhe des untergeordneten Elements nicht berechnet werden.

Höhe explizit definieren

Höhe festlegen von Das übergeordnete Element stellt, selbst bei einem kleinen Wert, eine definitive Höhe für den enthaltenden Block bereit. Dadurch kann das untergeordnete Element seine Höhe als 100 % der Höhe des übergeordneten Elements berechnen.

Das Wichtigste:

Prozentsatzhöhenberechnungen erfordern eine explizit definierte Höhe für den enthaltenden Block . In Fällen, in denen der umschließende Block einen minimalen/maximalen Höhenwert, aber keinen Höhenwert hat, wird die Höhe des untergeordneten Elements erst angewendet, wenn die Höhe des umschließenden Blocks explizit definiert wird.

Das obige ist der detaillierte Inhalt vonWarum füllt mein untergeordnetes Div nicht 100 % der Höhe aus, wenn das übergeordnete Element nur „min-height' hat?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!