Bagaimana untuk Mengisi Ruang Menegak Baki dengan Div menggunakan CSS sahaja?

Mengisi Ruang Menegak Secara Responsif dengan #saat Menggunakan CSS Sahaja

Soalan:

Bagaimana boleh kita mengisi ruang menegak yang tinggal di bawah #first dalam #wrapper hanya menggunakan CSS?

Penyelesaian:

Untuk mencapai ini, kita boleh menggunakan sifat flexbox dalam 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>

Penjelasan:

1. Tetapkan ketinggian kepada 100% untuk html dan badan untuk menduduki ketinggian penuh port pandangan.
2. Buat bekas induk .pembungkus dengan paparan: lentur.
3. Tetapkan arah lentur: lajur untuk menyusun elemen anak secara menegak.
4. Tetapkan ketinggian tetap pada .first untuk menentukan saiznya.
5. Gunakan flex-grow: 1 pada .second untuk membolehkannya mengembang dan mengisi ruang menegak yang tinggal.

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