Bagaimana untuk Membuat Div Menduduki Baki Ruang Menegak dengan CSS?

Mengisi Baki Ruang Menegak dengan CSS

HTML yang diberikan termasuk dua div (#first dan #second) dalam div pembalut (# pembalut). Matlamatnya adalah untuk menduduki ruang menegak yang tinggal di bawah #first menggunakan div #second semata-mata dengan CSS.

Untuk mencapai ini, ubah suai kod CSS seperti berikut:

<code class="css">html, body {
  height: 100%;
  margin: 0;
}

.wrapper {
  display: flex;
  flex-direction: column;
  width: 300px;
  height: 100%;
}

.first {
  height: 50px;
  background-color: #b2efd8;
}

.second {
  flex-grow: 1;
  background-color: #80c7cd;
}</code>

Kod yang disemak ini mencapai tugasan dengan mentakrifkan perkara berikut:

• Tetapkan ketinggian HTML dan elemen badan kepada ketinggian 100% untuk menjadikan keseluruhan halaman web memenuhi skrin secara menegak.
• Tukar div #wrapper paparkan sifat untuk "flex" dan konfigurasikannya sebagai bekas fleksibel menegak.
• Tetapkan ketinggian tetap kepada #first div, memastikan ia mengambil 50 piksel secara menegak.
• Gunakan sifat flex-grow kepada #second div dengan nilai 1. Ini membolehkan #second mengisi ruang menegak yang tinggal dalam #wrapper secara automatik.

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