Heim > Web-Frontend > CSS-Tutorial > Hauptteil

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

DDD
Freigeben: 2024-10-31 03:11:02
Original
875 Leute haben es durchsucht

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!