Wie kann ich innerhalb eines übergeordneten Elements mit variabler Höhe eine 100-prozentige Höhe eines untergeordneten Elements erreichen?

100 % Kindergröße bei unterschiedlichem Elternteil erreichen

Stellen Sie in einem mehrspaltigen Layout sicher, dass die Navigationsspalte vertikal am Hauptinhalt ausgerichtet ist ist entscheidend. Ohne Angabe der Größe des übergeordneten Elements kann sich dies jedoch als schwierig erweisen.

Lösung:

Verwenden Sie die Flex-Anzeigeeigenschaft für das übergeordnete Element. Dadurch können sich Kinder vertikal beugen und ausdehnen und so die Körpergröße der Eltern einnehmen.

.parent {
  display: flex;
}

Zusätzliche Eigenschaften:

• align-items: stretch; Legt fest, dass die untergeordneten Elemente innerhalb des übergeordneten Elements vertikal gestreckt werden.
• flex-direction: Column; Richtet die untergeordneten Elemente vertikal aus (Standardwert).

Beispiel:

.parent {
  display: flex;
  align-items: stretch;
}

.child {
  height: 100%;
  width: 50%;
}

Hinweis:

• Präfixe für browserübergreifende Kompatibilität werden empfohlen.
• Stellen Sie sicher, dass das übergeordnete Element Dass das Element eine gewisse Höhe hat, ist für die richtige vertikale Ausrichtung von entscheidender Bedeutung.

Das obige ist der detaillierte Inhalt vonWie kann ich innerhalb eines übergeordneten Elements mit variabler Höhe eine 100-prozentige Höhe eines untergeordneten Elements erreichen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!