Bagaimana untuk Membuat Footer Melekat di Bahagian Bawah Pelayar Menggunakan CSS?

Cara Melekatkan Pengaki pada Bahagian Bawah Pelayar Menggunakan CSS

Apabila menghadapi cabaran meletakkan pengaki di bahagian bawah penyemak imbas, satu halangan biasa ialah penampilannya yang berterusan di tengah-tengah tingkap. Untuk menyelesaikan isu ini, anda boleh menggunakan gaya CSS ini:

• Tentukan struktur HTML:

<code class="HTML"><form>
...
<div class="Main" />
<div id="Footer" />
</form></code>

• Tentukan CSS yang berkaitan:

<code class="CSS">* {
    margin: 0;
}

html, body {
    height: 100%;
}

#Footer {
    background-color: #004669;
    font-family: Tahoma, Arial;
    font-size: 0.7em;
    color: White;
    position: absolute;
    width: 100%;
    bottom: 0px;
    height: 4em;
}

.Main {
    position: relative;
    min-height: 100%;
    height: auto !important;
    height: 100%;

    margin: 0 25% -4em 25%;

    font-family: Verdana, Arial, Tahoma, Times New Roman;
    font-size: 0.8em;
    word-spacing: 1px;
    line-height: 170%;
}</code>

Gaya ini menentukan kedudukan pengaki sebagai mutlak dan bawah sebagai 0, memastikan ia kekal dilekatkan pada bahagian bawah penyemak imbas.

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