Bagaimana untuk Mengisi Baki Ruang Menegak dalam Bekas dengan CSS Flexbox?

Isi Ruang Menegak Baki dengan #saat

Untuk mengisi ruang menegak yang tinggal #pembungkus di bawah #pertama dengan div #kedua menggunakan CSS sahaja, anda boleh menggunakan langkah berikut:

1. Tetapkan html dan badan untuk menduduki ketinggian 100% tanpa jidar.
2. Tetapkan paparan: flex, flex-direction: lajur ke bekas induk .pembungkus.
3. Berikan ketinggian khusus kepada .pertama.
4. Tetapkan flex-grow: 1 hingga .saat untuk menjadikannya regangan untuk menduduki ruang yang tinggal.

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

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

Atas ialah kandungan terperinci Bagaimana untuk Mengisi Baki Ruang Menegak dalam Bekas dengan CSS Flexbox?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!