Wie fülle ich den verbleibenden vertikalen Raum in einem Wrapper-Div mit einem zweiten Div mithilfe von CSS?

CSS verwenden, um vertikalen Raum zu füllen

Frage:

Sie haben ein Layout mit einem #wrapper div, das #first enthält und #zweite Divs. Sie müssen den verbleibenden vertikalen Raum von #wrapper unter #first mit #second füllen und dabei nur CSS verwenden.

Lösung:

1. Flexbox-Layout:

   • Stellen Sie das Wrapper-Div so ein, dass es die Spalten „display: flex“ und „flex-direction:“ anzeigt. Dadurch wird ein vertikales Layout eingerichtet.
   • Stellen Sie die Höhe des Wrappers auf 100 % ein.

2. Höhensteuerung:

   • Setzen Sie die Höhe des ersten Divs auf einen festen Wert (z. B. 50 Pixel), um sicherzustellen, dass es sich nicht ausdehnt.

3. Flex- Grow-Eigenschaft:

   • Verwenden Sie die Flex-Grow-Eigenschaft im zweiten Div. Diese Eigenschaft ermöglicht es dem zweiten Div, vertikal zu expandieren und den verbleibenden Platz auszufüllen. Setzen Sie „flex-grow“ auf 1, um es flexibel zu machen.

Codebeispiel:

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

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

.first {
  height: 50px;
}

.second {
  flex-grow: 1;
}</code>

Das obige ist der detaillierte Inhalt vonWie fülle ich den verbleibenden vertikalen Raum in einem Wrapper-Div mit einem zweiten Div mithilfe von CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!