Wie kann man mit CSS dafür sorgen, dass ein Div den verbleibenden vertikalen Raum einnimmt?

Den verbleibenden vertikalen Raum mit CSS füllen

Der angegebene HTML-Code enthält zwei Divs (#first und #second) innerhalb eines Wrapper-Divs (# Verpackung). Das Ziel besteht darin, den verbleibenden vertikalen Raum unter #first mit #second div ausschließlich mit CSS zu belegen.

Um dies zu erreichen, ändern Sie den CSS-Code wie folgt:

<code class="css">html, body {
  height: 100%;
  margin: 0;
}

.wrapper {
  display: flex;
  flex-direction: column;
  width: 300px;
  height: 100%;
}

.first {
  height: 50px;
  background-color: #b2efd8;
}

.second {
  flex-grow: 1;
  background-color: #80c7cd;
}</code>

Mit diesem überarbeiteten Code wird dies erreicht Erledigen Sie die Aufgabe, indem Sie Folgendes definieren:

• Setzen Sie die Höhe der HTML- und Body-Elemente auf 100 % Höhe, damit die gesamte Webseite den Bildschirm vertikal ausfüllt.
• Ändern Sie die #wrapper-Divs display-Eigenschaft auf „flex“ und konfigurieren Sie sie als vertikalen Flex-Container.
• Weisen Sie #first div eine feste Höhe zu und stellen Sie sicher, dass es vertikal 50 Pixel einnimmt.
• Wenden Sie die Flex-Grow-Eigenschaft an zu #second div mit einem Wert von 1. Dadurch kann #second automatisch den verbleibenden vertikalen Raum innerhalb von #wrapper füllen.

Das obige ist der detaillierte Inhalt vonWie kann man mit CSS dafür sorgen, dass ein Div den verbleibenden vertikalen Raum einnimmt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!