Wie fülle ich den verbleibenden vertikalen Raum mit einem Div, indem ich nur CSS verwende?

Responsives vertikales Füllen des vertikalen Raums mit #second nur unter Verwendung von CSS

Frage:

Wie kann das? Wir füllen den verbleibenden vertikalen Raum unter #first innerhalb von #wrapper nur mit CSS?

Lösung:

Um dies zu erreichen, können wir die Flexbox-Eigenschaften in nutzen CSS:

<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>

HTML:

<code class="html"><div class="wrapper">
  <div class="first" style="background:#b2efd8">First</div>
  <div class="second" style="background:#80c7cd">Second</div>
</div></code>

Erklärung:

1. Höhe auf 100 % setzen Damit HTML und Text die volle Höhe des Ansichtsfensters einnehmen.
2. Erstellen Sie einen übergeordneten Container .wrapper mit Anzeige: Flex.
3. Flex-Richtung festlegen: Spalte, um untergeordnete Elemente vertikal anzuordnen.
4. Weisen Sie .first eine feste Höhe zu, um seine Größe zu bestimmen.
5. Verwenden flex-grow: 1 auf .second, damit es sich ausdehnen und den verbleibenden vertikalen Raum ausfüllen kann.

Das obige ist der detaillierte Inhalt vonWie fülle ich den verbleibenden vertikalen Raum mit einem Div, indem ich nur CSS verwende?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!