Bagaimana untuk Menjadikan Div Kanak-kanak Menduduki Baki Ketinggian Ibu Bapanya tanpa Kedudukan Mutlak?

Jadikan Div Menduduki Baki Ketinggian Induk Tanpa Kedudukan Mutlak

Pengenalan

Dalam pembangunan frontend, memperuntukkan ruang kepada elemen dalam div kontena boleh menjadi perkara biasa cabaran. Satu senario melibatkan membuat div kanak-kanak menduduki baki ketinggian ibu bapanya, terutamanya apabila ketinggian ibu bapa diketahui tetapi ketinggian kanak-kanak itu tidak. Artikel ini meneroka cara untuk mencapai ini tanpa menggunakan kedudukan mutlak.

Menggunakan Teknik CSS

• Reka Letak Grid: Dengan memperuntukkan sifat baris-template-grid kepada bekas dengan nilai tunggal (cth., 100px), div anak akan mengisi ruang yang tinggal secara automatik secara menegak.
• Flexbox: Menggunakan paparan: flex dan flex-direction: gaya lajur pada bekas, tetapkan sifat flex-grow pada div kanak-kanak kepada 1. Ini secara berkesan mengarahkan kanak-kanak untuk kembangkan dan menduduki mana-mana ruang yang tinggal.
• Pendekatan berasaskan Kalkulator: Jika ketinggian anak pertama diketahui, ketinggian anak kedua boleh dikira menggunakan calc(100% - first_child_height) dalam CSS.
• Harta Limpahan: Apabila bekas mempunyai sifat limpahan ditetapkan kepada tersembunyi, ia secara berkesan memangkas div kanak-kanak kepada dimensi bekas. Dengan menetapkan ketinggian div kanak-kanak kepada 100%, ia akan berkembang untuk memenuhi ruang yang tersedia.

Kod Contoh

Rujuk kepada coretan CSS dan HTML yang disediakan untuk contoh terperinci yang menunjukkan teknik-teknik ini. Ambil perhatian bahawa sifat kandungan maksimum juga boleh dianggap sebagai pilihan untuk saiz, menghapuskan keperluan untuk ketinggian tetap dalam kes tertentu.

Atas ialah kandungan terperinci Bagaimana untuk Menjadikan Div Kanak-kanak Menduduki Baki Ketinggian Ibu Bapanya tanpa Kedudukan Mutlak?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!