Wie kann ich dafür sorgen, dass sich ein untergeordnetes Div auf die Größe seines übergeordneten Elements mit unbekannter Größe ausdehnt?

Untergeordnete Divs strecken, um sie an die Größe der Eltern anzupassen

Wenn Sie auf eine Situation wie die beschriebene stoßen, in der die Höhe eines untergeordneten Divs übereinstimmen sollte die seines Elternteils, aber die Größe des Elternteils ist unbekannt, eine Lösung kann durch Flexbox gefunden werden.

Um eine vertikale Skalierung des Kinds zu erreichen div, das übergeordnete Element erfordert den folgenden Stil:

display: flex;

Zusätzlich sollten Sie Browser-Präfixe hinzufügen, um die browserübergreifende Kompatibilität sicherzustellen.

Die align-items: stretch; Eigentum ist ebenfalls von entscheidender Bedeutung. Da es sich jedoch um den Standardwert für align-items in Flexboxen handelt, müssen Sie ihn nicht explizit festlegen, es sei denn, Sie beabsichtigen, einen anderen Wert zu verwenden.

Die align-items-Eigenschaft von Flexbox wirkt sich auf untergeordnete Elemente aus, nicht auf die Element, auf das es angewendet wird. Um die Streckung für untergeordnete Elemente zu definieren, können Sie die Eigenschaft align-self verwenden.

Betrachten Sie das folgende Beispiel:

.parent {
  background: red;
  padding: 10px;
  display:flex;
}

.other-child {
  width: 100px;
  background: yellow;
  height: 150px;
  padding: .5rem;
}

.child {  
  width: 100px;
  background: blue;
}

<div class="parent">
  <div class="other-child">
    Only used for stretching the parent
  </div>
  <div class="child"></div>
</div>

In diesem Beispiel existiert ausschließlich das other-child-Div um die Körpergröße der Eltern zu strecken. Dadurch nimmt das untergeordnete Div 100 % der einstellbaren Höhe des übergeordneten Elements ein.

Das obige ist der detaillierte Inhalt vonWie kann ich dafür sorgen, dass sich ein untergeordnetes Div auf die Größe seines übergeordneten Elements mit unbekannter Größe ausdehnt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!