Bagaimana untuk Mencapai Reka Letak CSS Ketinggian Minimum 100% dengan Pengepala dan Pengaki Tetap?

Reka Letak CSS Ketinggian Minimum 100%

Apabila mencipta reka letak CSS, adalah penting untuk memastikan elemen mengekalkan ketinggian minimum merentas pelbagai penyemak imbas. Tugas ini menjadi amat mencabar apabila berurusan dengan reka letak yang menampilkan pengepala dan pengaki ketinggian tetap, di mana kawasan kandungan perlu menduduki ruang yang tinggal dan kekal tetap di bahagian bawah.

Penyelesaian Berkesan:

Untuk mencapai susun atur ketinggian minimum 100%, pendekatan berikut boleh digunakan:

• Ketinggian min: Tetapkan sifat ketinggian min unsur bekas kepada 100%. Ini memaksa bekas untuk kekal pada ketinggian minimum 100%, membolehkan kawasan kandungan mengembang secara menegak.
• Kedudukan Relatif: Letakkan elemen bekas secara relatif, yang membolehkan elemen pengaki kekal tetap di bahagian bawahnya.
• Padding-bottom: Gunakan padding-bottom pada kawasan kandungan untuk mencipta ruang untuk elemen pengaki mutlak. Ini memastikan pengaki tidak bertindih dengan kandungan.

Pelaksanaan:

Pertimbangkan kod CSS berikut:

#container {
    position: relative;
    min-height: 100%;
}

#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
}

#content {
    padding-bottom: 5em;  
}

Keserasian Pelayar:

Penyelesaian ini berfungsi dengan berkesan merentas pelayar moden, termasuk Google Chrome, Mozilla Firefox dan Safari. Ia juga memastikan keserasian dengan Internet Explorer 6 dan ke atas.

Penggunaan:

Untuk melaksanakan reka letak ini, hanya tetapkan ketinggian minimum elemen bekas dan tambahkan kedudukan yang diperlukan dan padding kepada kandungan dan elemen pengaki. Ini akan memastikan bahawa kawasan kandungan memenuhi ruang yang tersedia sambil mengekalkan pengaki tetap di bahagian bawah, tanpa mengira jumlah kandungan.

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Reka Letak CSS Ketinggian Minimum 100% dengan Pengepala dan Pengaki Tetap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!