Bagaimana Saya Boleh Membuat Anak Div ​​Mengisi Ruang Baki Bekas Induknya?

Memperluas Ketinggian div untuk Menduduki Baki Ruang Induk

Merupakan tugas biasa untuk membuat anak div menduduki baki ruang bekas induknya tanpa menetapkan ketinggiannya secara eksplisit. Berikut adalah beberapa kaedah untuk mencapainya:

1. Reka Letak Grid

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

Kaedah ini mencipta reka letak grid dengan satu baris ketinggian 100px. Div kanak-kanak akan mengisi ruang yang tinggal.

2. Flexbox

.container {
  display: flex;
  flex-direction: column;
}

.container .down {
  flex-grow: 1;
}

Flexbox membenarkan penetapan flex-grow kepada 1 pada div kanak-kanak, menyebabkan ia mengembang untuk memenuhi ruang menegak yang tinggal.

3. Pengiraan Ketinggian

.up {
  height: 100px;
}

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

Kaedah ini menggunakan pengiraan ketinggian CSS untuk menolak ketinggian anak pertama daripada 100%, memberikan ketinggian yang tinggal kepada anak kedua.

4 . Limpahan Tersembunyi

.container {
  overflow: hidden;
}

.down {
  height: 100%;
}

Mengatasi gelagat paparan lalai dengan menyembunyikan limpahan membolehkan div anak mengisi ketinggian ibu bapa.

5. Kandungan Maks

.container {
  height: 100%;
}

.down {
  height: max-content;
}

Nilai sifat kandungan maksimum mensaiz div kanak-kanak mengikut kandungannya, dengan berkesan menduduki ruang yang tinggal.

Perhatikan bahawa sesetengah kaedah mungkin mempunyai pengehadan atau penyemak imbas sekatan sokongan. Pilih kaedah yang sesuai berdasarkan keperluan khusus anda.

Atas ialah kandungan terperinci Bagaimana Saya Boleh Membuat Anak Div ​​Mengisi Ruang Baki Bekas Induknya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!