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>

#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.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Div Kanak-Kanak Menduduki Baki Ketinggian Ibu Bapanya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!