Flexbox ist ein mächtiges CSS Layout-Tool, das es einfach macht, Elemente innerhalb eines Containers auszurichten und Platz zu verteilen. Um die Kinder-Elemente (Flexbox-Children) auf 100% der Höhe des Elternelements (Parent-Element) zu setzen, befolgen Sie die folgenden Schritte.
Sie sehen gerade einen Platzhalterinhalt von YouTube. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Mehr InformationenHöhe des Parent-Elements
Stellen Sie sicher, dass das Parent-Element eine Höhe besitzt:
<div class="parent">
<div class="child">Child</div>
</div>
.parent {
display: flex;
height: 500px; /* oder height: 100% */
}
Höhe der Child-Elemente
Setzen Sie die Höhes der Flexbox-Children auf 100 %, um das Parent-Element vollständig vertikal auszufüllen.
.child {
height: 100%;
align-items: center;
}
Code-Beispiel
Der vollständige HTML- und CSS-Code sieht dann folgendermaßen aus:
<html>
<head>
<style>
.parent {
display: flex;
height: 500px; /* oder height: 100% */
}
.child {
height: 100%;
align-items: center;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">Child</div>
</div>
</body>
</html>Dies ist eine einfache Methode, um Flexbox-Children auf 100 % der Höhe des Parent-Elements festzulegen. Verwenden Sie diese Technik, um Ihre Layouts ansprechender und einfacher zu gestalten.
