Rumah >hujung hadapan web >tutorial css >Bagaimana Saya Boleh Membuat Anak Div ​​Mengisi Ruang Baki Bekas Induknya?

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

Susan Sarandon
Susan Sarandonasal
2024-12-28 06:00:18812semak imbas

How Can I Make a Div Child Fill the Remaining Space of Its Parent Container?

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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn