Bagaimanakah Saya Boleh Membuat Div Kanak-Kanak Menduduki Baki Ketinggian Ibu Bapanya?

Cara Membuat Div Menduduki Baki Ketinggian Ibu Bapa

Pertimbangkan kod HTML dan CSS berikut:

<div>
<pre class="brush:php;toolbar:false">#container { width: 300px; height: 300px; border:1px solid red;}
#up { background: green; }
#down { background:pink;}

Di sini, kami mempunyai div kontena dengan dua elemen anak. Anak pertama (#atas) mempunyai ketinggian tertentu, manakala anak kedua (#bawah) tidak. Bagaimanakah kita boleh membuat #down menduduki baki ketinggian div kontena?

Penyelesaian

Beberapa kaedah boleh mencapai ini, bergantung pada keserasian penyemak imbas dan sama ada #up mempunyai tetap ketinggian.

Pilihan:

1. Reka Letak Grid:

.container {
  display: grid;
  grid-template-rows: 100px;
}

2. Reka Letak Kotak Flex:

.container {
  display: flex;
  flex-direction: column;
}
.container .down {
  flex-grow: 1;
}

3. Ketinggian Dikira:

.container .up {
  height: 100px;
}
.container .down {
  height: calc(100% - 100px);
}

4. Limpahan Tersembunyi:

.container {
  overflow: hidden;
}
.container .down {
  height: 100%;
}

Pilihan kaedah bergantung pada keperluan khusus dan sokongan penyemak imbas. Ambil perhatian bahawa CSS kini termasuk nilai sifat kandungan maksimum untuk saiz, yang mungkin sesuai dalam senario tertentu.