Bagaimana untuk Membuat Footer Anda Melekat ke Bawah dengan CSS?

Menguasai Kedudukan Pengaki dengan CSS: Melekat ke Bawah

Apabila membuat halaman web, pastikan pengaki kekal berlabuh di bahagian bawah penyemak imbas memberikan cabaran biasa. Mari kita mendalami penyelesaiannya, menangani kod khusus anda dan meneroka teknik yang boleh membantu anda mengatasi dilema ini.

Satu pendekatan yang sering gagal ialah menetapkan kedudukan pengaki kepada relatif. Kedudukan relatif ini sahaja tidak mencukupi untuk mengekalkan pengaki terpaku pada bahagian bawah.

Sebaliknya, cuba gunakan kedudukan mutlak. Begini caranya:

<code class="CSS">#Footer {
    position: absolute;
    width: 100%;
    bottom: 0px;
}</code>

Dengan menetapkan kedudukan kepada mutlak, anda mengalihkan pengaki daripada aliran biasa dokumen. Lebar 100% memastikan ia menjangkau seluruh lebar penyemak imbas, manakala sifat bawah, ditetapkan kepada 0, menambatnya ke bahagian paling bawah.

Sebagai alternatif, anda boleh menggunakan kedudukan tetap, yang serupa dengan mutlak kedudukan tetapi mengekalkan elemen di tempatnya walaupun pengguna menatal halaman. Walau bagaimanapun, kedudukan tetap mungkin tidak serasi dengan semua penyemak imbas, terutamanya Internet Explorer.

Dalam kod khusus anda, ubah suai gaya pengaki seperti berikut:

<code class="CSS">#Footer {
    position: absolute;
    width: 100%;
    bottom: 0;
    background-color: #004669;
    font-family: Tahoma, Arial;
    font-size: 0.7em;
    color: White;
    height: 4em;
}</code>

Dengan menggunakan perubahan ini, anda harus kini mempunyai pengaki yang kekal berakar kukuh di bahagian bawah penyemak imbas, tanpa mengira panjang kandungan halaman.

Atas ialah kandungan terperinci Bagaimana untuk Membuat Footer Anda Melekat ke Bawah dengan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!