Bagaimana untuk Menjadikan Elemen Div Menduduki Baki Ketinggian Halaman?

Menduduki Baki Ketinggian untuk Elemen Div

Dalam reka bentuk web, anda mungkin menghadapi situasi di mana anda perlu membuat elemen div mengambil bahagian yang selebihnya ketinggian halaman. Pertimbangkan senario ini: anda mempunyai dua div dengan kod berikut:

<div>

Bagaimanakah anda menjadikan div2 menduduki baki ketinggian halaman?

Penyelesaian: Kedudukan Mutlak

Untuk mencapai ini, anda boleh menggunakan kedudukan mutlak dengan yang berikut CSS:

#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 mempunyai ketinggian tetap 50px dan menjangkau lebar penuh halaman.
• Div2 diletakkan secara mutlak dengan jidar atasnya ditetapkan kepada 50px (ketinggian div1) dan jidar bawahnya ditetapkan kepada 0, menyebabkan ia menduduki baki ketinggian.

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