Bagaimana untuk Menjadikan Elemen DIV Menduduki Ketinggian Halaman Baki Selepas DIV Yang Lain?

Menduduki Ketinggian Halaman Baki dengan Elemen DIV

Dalam pembangunan web, selalunya perlu mempunyai elemen yang melaraskan ketinggiannya secara automatik untuk mengisi baki ruang pada halaman. Dalam kes ini, soalan melibatkan membuat DIV kedua (#div2) menduduki ketinggian yang tinggal selepas mengambil kira DIV pertama (#div1).

Untuk mencapai ini, kedudukan mutlak CSS digunakan:

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

Dengan kedudukan mutlak, #div2 dialih keluar daripada aliran biasa halaman dan kedudukannya ditentukan secara relatif kepada nenek moyang kedudukan terdekatnya (#div1).

• atas: 50px: Menentukan jarak antara bahagian atas #div1 dan #div2.
• bawah: 0: Memastikan #div2 mengembang menegak untuk mengisi ruang yang tinggal ke bahagian bawah halaman.

Pendekatan ini membolehkan #div2 melaraskan ketinggiannya secara dinamik berdasarkan ketinggian halaman, memastikan ia menduduki keseluruhan ruang yang tinggal di bawah #div1.

Atas ialah kandungan terperinci Bagaimana untuk Menjadikan Elemen DIV Menduduki Ketinggian Halaman Baki Selepas DIV Yang Lain?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!