Bagaimana untuk Menjadikan Div Menduduki Baki Ketinggian Halaman dalam HTML dan CSS?

Cara Membuat Div Menduduki Baki Ketinggian dalam HTML dan CSS

Dalam HTML, ia boleh menjadi cabaran biasa untuk mencapai reka letak khusus di mana satu div perlu menduduki baki ketinggian halaman. Pertimbangkan situasi dengan dua div:

<div>

Matlamatnya ialah untuk menjadikan #div2 mengisi baki ketinggian halaman. Berikut ialah penyelesaian menggunakan kedudukan mutlak:

#div1 {
    width: 100%;
    height: 50px;
    background-color: red; /* Development Only */
}
#div2 {
    width: 100%;
    position: absolute;
    top: 50px;
    bottom: 0;
    background-color: blue; /* Development Only */
}

Dalam kod ini, #div1 diberi ketinggian tetap 50px, manakala #div2 diletakkan secara mutlak dan dibuat untuk menduduki ruang yang tinggal. Sifat teratas ditetapkan kepada 50px, iaitu ketinggian #div1. Sifat bawah ditetapkan kepada 0, menunjukkan bahawa #div2 harus dilabuhkan ke bahagian bawah induknya, iaitu halaman itu sendiri dalam kes ini. Dengan berbuat demikian, #div2 akan meregangkan secara dinamik untuk mengambil baki ketinggian halaman.

Atas ialah kandungan terperinci Bagaimana untuk Menjadikan Div Menduduki Baki Ketinggian Halaman dalam HTML dan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!