Heim > Web-Frontend > CSS-Tutorial > Wie kann ich dafür sorgen, dass sich ein untergeordnetes Div auf die Größe seines übergeordneten Elements mit unbekannter Größe ausdehnt?

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

DDD
Freigeben: 2024-12-18 02:54:10
Original
113 Leute haben es durchsucht

How Can I Make a Child Div Stretch to the Height of Its Parent with Unknown Height?

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;
Nach dem Login kopieren

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;
}
Nach dem Login kopieren
<div class="parent">
  <div class="other-child">
    Only used for stretching the parent
  </div>
  <div class="child"></div>
</div>
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage