Warum schlägt „height: 100 %' bei einem untergeordneten Element fehl, wenn sein übergeordnetes Element „min-height'/„max-height', aber keine explizite Höhe hat?

Warum wird „Höhe: 100 %“ auf ein untergeordnetes Element nicht angewendet, wenn das übergeordnete Element einen Min-Height-/Max-Height-Wert, aber keinen angegebenen Höhenwert hat?

Berücksichtigen Sie das folgende HTML- und CSS-Setup:

<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%;
}

In diesem In diesem Szenario wird das Containerelement wie erwartet mit einer Höhe von 300 Pixel gerendert, das untergeordnete Element bleibt jedoch trotz der Deklaration height: 100 % ohne Höhe.

Hinzufügen eines kleinen Höhenwerts (z. B. 1 Pixel) zum Das Containerelement führt dazu, dass das untergeordnete Element plötzlich den gesamten Container mit einer Höhe von 300 Pixeln ausfüllt:

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

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

Dieses Verhalten ist auf die CSS-Spezifikation selbst zurückzuführen. Wenn die Höhe eines Elements nicht explizit definiert ist, schlägt die prozentuale Höhe seines untergeordneten Elements fehl. Gemäß der 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 nicht explizit angegeben ist (d. h. sie hängt von der Inhaltshöhe ab) und dieses Element nicht absolut positioniert ist, wird der Wert zu „auto“ berechnet.

Im Anfangsfall, da der Wenn die Höhe des Containerelements nicht explizit festgelegt wird, wird die Höhe des untergeordneten Elements: 100 % zu „Auto“. Dies bedeutet, dass es nur so viel Platz einnimmt, wie sein Inhalt erfordert, was zu keiner sichtbaren Höhe führt.

Durch das Hinzufügen eines Höhenwerts (sogar so klein wie 1 Pixel) zum Containerelement wird dessen Höhe explizit definiert, was dem untergeordneten Element ermöglicht Elementhöhe: 100 %, um die richtige Höhe zu berechnen und anzuwenden.

Das scheinbar unerwartete Verhalten ist daher auf die Tatsache zurückzuführen, dass die Höhe eines übergeordneten Elements explizit für seine untergeordneten Elemente definiert werden muss um ihre prozentualen Höhen korrekt zu berechnen.

Das obige ist der detaillierte Inhalt vonWarum schlägt „height: 100 %' bei einem untergeordneten Element fehl, wenn sein übergeordnetes Element „min-height'/„max-height', aber keine explizite Höhe hat?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!