Warum funktioniert „height: 100 %' nicht bei einem untergeordneten Element, wenn das übergeordnete Element nur „min-height' hat?

Warum die untergeordnete Höhe trotz 100 % fehlschlägt, wenn das übergeordnete Element nur minimale/maximale Höhe hat

Im angegebenen HTML-Snippet das übergeordnete Containerelement mit minimaler Höhe : 300px und kein expliziter Höhenwert führen dazu, dass die Höhe des untergeordneten Elements: 100 % fehlschlägt.

Verständnis das Verhalten

Gemäß der CSS-Spezifikation:

"Gibt eine prozentuale Höhe an. Der Prozentsatz wird in Bezug auf die Höhe des enthaltenden Blocks der generierten Box berechnet. Wenn die Höhe des enthaltenden Blocks beträgt nicht explizit angegeben (d. h. es hängt von der Höhe des Inhalts ab) und dieses Element nicht absolut positioniert ist, wird der Wert berechnet 'auto.'"

Im bereitgestellten Szenario ist die Höhe des Containerelements nicht explizit definiert. Stattdessen wird es anhand seines Inhalts und des Mindesthöhenwerts bestimmt. Daher kann die Höhe des untergeordneten Elements nicht genau zu 100 % berechnet werden.

Erfordern einer expliziten Höhe

Wenn ein Höhenwert für den Container festgelegt wird, selbst wenn er nur 1 Pixel beträgt, wird dieser explizit angegeben definiert die Höhe des umschließenden Blocks. Dadurch kann die Höhe des untergeordneten Elements zu 100 % korrekt berechnet und angewendet werden, sodass der gesamte Container auch ohne explizite Höheneinstellung ausgefüllt wird.

Alternativer Ansatz

Wenn das gewünschte Verhalten darin besteht, dass das untergeordnete Element gefüllt wird Um das gesamte übergeordnete Element unabhängig von der Höhe des übergeordneten Elements anzuzeigen, besteht ein alternativer Ansatz in der Verwendung von CSS-Flexbox wie:

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.child {
  height: 100%;
}

Das obige ist der detaillierte Inhalt vonWarum funktioniert „height: 100 %' nicht bei einem untergeordneten Element, wenn das übergeordnete Element nur „min-height' hat?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!