Hier sind einige Titeloptionen, die zum Inhalt und Stil Ihres Artikels passen: Option 1 (direkt und klar): * So verteilen Sie den verbleibenden vertikalen Raum mit Flexbox Option 2 (Fragenformat): * Willst du

Ideale Höhenverteilung mit Flexbox und verbleibendem vertikalen Raum erreichen

Flexbox präsentiert eine elegante und effiziente CSS-Lösung, um den verbleibenden vertikalen Raum in einem zu füllen Containerelement. In diesem Fall zielen wir darauf ab, die Höhe zwischen #first und #second divs innerhalb des #wrapper-Containers zu verteilen und sicherzustellen, dass #second den verbleibenden Platz einnimmt.

Die übernommene Lösung nutzt den folgenden CSS-Code:

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

Innerhalb der #wrapper-Div erstellen wir ein Flexbox-Layout mit vertikaler Ausrichtung. Dadurch können die beiden Divs #first und #second vertikal ausgerichtet werden. Die Höhe von #wrapper ist auf 100 % festgelegt, um sicherzustellen, dass es die gesamte Höhe des Ansichtsfensters einnimmt.

Um die Höhe von #first anzugeben, weisen wir einen festen Wert von 50 Pixel zu. Für #second nutzen wir die Eigenschaft „flex-grow“, um die Höhe zu steuern. Indem wir „flex-grow“ auf 1 setzen, geben wir an, dass #second erweitert werden soll, um den verbleibenden Platz im #wrapper-Container zu füllen.

Dadurch nimmt #first die feste Höhe von 50 Pixel ein, während #second sich dynamisch anpasst seine Höhe, um den verbleibenden vertikalen Raum auszufüllen. Dadurch wird sichergestellt, dass sich das Layout an unterschiedliche Bildschirmgrößen und Geräteausrichtungen anpasst.

Das obige ist der detaillierte Inhalt vonHier sind einige Titeloptionen, die zum Inhalt und Stil Ihres Artikels passen: Option 1 (direkt und klar): * So verteilen Sie den verbleibenden vertikalen Raum mit Flexbox Option 2 (Fragenformat): * Willst du. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!