Bagaimana untuk Membetulkan Footer ke Bahagian Bawah Halaman Web Menggunakan HTML dan CSS?

Betulkan pengaki ke bahagian bawah halaman menggunakan HTML dan CSS

Keperluan soalan adalah untuk menetapkan pengaki halaman web di bahagian bawah halaman, tanpa mengira saiz skrin.

Untuk menyelesaikannya, kami akan menggunakan kedudukan: sifat tetap dalam CSS. Sifat ini membenarkan elemen diposisikan secara relatif kepada port pandangan, dan bukannya kepada aliran dokumen. Kami juga akan menetapkan sifat bawah kepada 0px untuk meletakkan pengaki di bahagian bawah halaman.

Selain itu, kami perlu menetapkan ketinggian pengaki, supaya ia tidak mengambil keseluruhan port pandangan . Dalam contoh ini, kami akan menetapkan ketinggian kepada 50px.

Berikut ialah gaya CSS yang dikemas kini untuk pengaki:

#footer {
    position: fixed;
    height: 50px;
    background-color: red;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin-bottom: 0px;
}

Untuk memastikan kandungan di atas pengaki tidak bertindih dengannya , kita perlu menambah sedikit ruang di bawah kandungan utama. Ini boleh dicapai dengan menetapkan sifat margin-bawah elemen badan kepada nilai yang lebih besar daripada atau sama dengan ketinggian pengaki. Dalam contoh ini, kami akan menetapkan margin bawah kepada 50px.

Berikut ialah gaya CSS yang dikemas kini untuk badan:

body {
    margin-bottom: 50px;
}

Dengan perubahan ini, pengaki kini akan dibetulkan kepada bahagian bawah halaman, tanpa mengira saiz skrin.

Atas ialah kandungan terperinci Bagaimana untuk Membetulkan Footer ke Bahagian Bawah Halaman Web Menggunakan HTML dan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!