Bagaimana untuk Membuat Div Mengisi Baki Tinggi Induknya?

Cara Membuat Div Menduduki Baki Ketinggian Induk Tanpa Kedudukan Mutlak

Pengenalan

Dalam pembangunan web, kita sering menghadapi situasi di mana kita mahukan elemen div untuk mengisi baki ketinggian bekas induknya. Ini boleh dicapai menggunakan pelbagai teknik CSS, memastikan fleksibiliti dan responsif merentas penyemak imbas.

Teknik

1. Flexbox

Flexbox membolehkan kami menjajarkan dan mengedarkan elemen dalam bekas menggunakan sifat flex. Untuk menjadikan div menduduki ketinggian yang tinggal, tetapkan paparan bekas kepada lentur dan tetapkan flex-grow: 1 kepada div.

2. Grid

Grid menawarkan pendekatan berstruktur kepada reka letak halaman. Untuk mencapai matlamat kami, sediakan grid dengan satu baris menggunakan grid-template-rows dan tetapkan grid-row: 2 kepada div yang sepatutnya menduduki ruang yang tinggal.

3. Kalkulator (Calc)

Untuk penyemak imbas dengan sokongan calc() yang baik, kaedah ini boleh menjadi mudah. Hanya tetapkan ketinggian div kepada calc(100% - HEIGHT_OF_OTHER_CHILD).

4. Limpahan

Teknik ini bergantung pada sifat limpahan. Tetapkan limpahan bekas kepada tersembunyi, kemudian tetapkan ketinggian: 100% kepada div yang sepatutnya berkembang.

Pertimbangan

Perhatikan bahawa teknik ini mungkin tidak berfungsi secara konsisten dalam semua penyemak imbas. Sentiasa uji hasil anda merentas berbilang penyemak imbas untuk memastikan keserasian. Selain itu, pastikan ketinggian bekas induk ditakrifkan dengan betul untuk mengelakkan tingkah laku yang tidak diingini.

Atas ialah kandungan terperinci Bagaimana untuk Membuat Div Mengisi Baki Tinggi Induknya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!