Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk Membuat Footer Melekat di Bahagian Bawah Pelayar Menggunakan CSS?

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

Patricia Arquette
Patricia Arquetteasal
2024-10-31 16:37:30322semak imbas

How to Make a Footer Stick to the Bottom of the Browser Using 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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn