Heim  >  Artikel  >  Web-Frontend  >  Wie fülle ich den verbleibenden vertikalen Raum mit einem Div, indem ich nur CSS verwende?

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

DDD
DDDOriginal
2024-10-31 03:11:02852Durchsuche

How to Fill Remaining Vertical Space with a Div using Only CSS?

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn