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