Warum funktioniert „height: 100 %' nicht bei einem untergeordneten Element ohne übergeordnete Höhe, wenn „min-height' oder „max-height' verwendet wird?

Warum Körpergröße: 100 % bei einem Kind nicht ohne einen Körpergrößenwert bei Eltern mit Min.-/Max.-Körpergröße gilt

In bestimmten Situationen, wenn ein Kind Das Element ist auf Höhe: 100 % eingestellt und sein übergeordnetes Element hat eine Mindesthöhe oder max-height-Wert, aber keinen expliziten height-Wert, erbt das Kind möglicherweise nicht die gewünschte Größe. Lassen Sie uns den Grund für dieses Verhalten anhand von HTML, CSS und relevanten CSS-Spezifikationen untersuchen.

Betrachten Sie den folgenden HTML- und CSS-Code:

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

Problem:

Wenn Sie im obigen Beispiel dieses Dokument in einem Browser anzeigen, stellen Sie möglicherweise fest, dass das untergeordnete Element nicht den gesamten Container ausfüllt. Obwohl der Container eine Mindesthöhe von 300 Pixel und das untergeordnete Element eine Höhe von 100 % hat, bleibt das untergeordnete Element leer (ohne sichtbare Höhe).

Erklärung:

Dieses Verhalten ist auf die CSS-Spezifikation zurückzuführen. In der Spezifikation heißt es:

"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. es hängt von der Höhe des Inhalts ab) und dieses Element nicht absolut positioniert ist, wird der Wert zu „auto“ berechnet.“

In unserem Fall beträgt die Höhe des Containers nicht explizit angegeben. Es wird durch seinen Inhalt bestimmt, der in diesem Fall nur das untergeordnete Element ist. Da das untergeordnete Element keine explizite Höhe hat (aufgrund der prozentualen Höhe), ist die Höhe des Containers im Wesentlichen undefiniert. Folglich wird auch die prozentuale Höhe des untergeordneten Elements undefiniert.

Um dieses Problem zu beheben und sicherzustellen, dass das untergeordnete Element den gesamten Container ausfüllt, müssen Sie explizit einen Höhenwert für den Container festlegen, wie in der folgenden Änderung dargestellt CSS:

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

Indem Sie die Höhe des Containers auch nur auf einen kleinen Wert (in diesem Fall 1 Pixel) festlegen, stellen Sie effektiv eine Referenzhöhe für die prozentuale Höhe des untergeordneten Elements bereit. Dadurch kann das untergeordnete Element die Höhe des Containers korrekt erben und sicherstellen, dass es den gesamten Container ausfüllt.

Das obige ist der detaillierte Inhalt vonWarum funktioniert „height: 100 %' nicht bei einem untergeordneten Element ohne übergeordnete Höhe, wenn „min-height' oder „max-height' verwendet wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!