Fixed Footer dimana content footer pada posisi fixed jadi tidak berubah-ubah pada halamannya, Seperti pada halnya tampilan menu yang dibuat fixed jadi saat halaman di scroll kebawah maka menu akan tetap terlihat dan posisi fixed dibagian atas. Dalam kesempatan kali ini yuuuk kita belajar membuat fixed footer menggunakan html css, bagaimana cara membuatnya mari ikuti langkah-langkah berikut ini:Langkah pertama yang dipersiapakan struktur HTML seperti code dibawah ini:

Pada file html diatas saya menyisipkan 3 buah gambar yaitu untuk bagian banner dan yang lainnya sebagai isi content dalam artikelnya, jadi pada tag p disesuaikan saja berapa banyak isi paragaf ya.

Baiklah sepertinya ada yang kurang tanpa memberikan style untuk tampilannya berikut CSS nya bisa diperhatikan code dibawah ini:

oiya gambar yang dipakai sebagai banner diberikan style position: absolute serta object-fit:cover sehingga gambar dengan lebar sama dengan browser.

Jika sudah selesai mengikuti code diatas ,sekarang buka pada browser masing-masing apakah sudah seperti tampilan berikut ini :

Membuat Fix Footer Dengan HTML CSS

Jadi saat di scroll kebawah maka akan terlihat posisi footer tidak berubah posisi karena sudah diberikan property = position:fixed dan z-index:1 ,footer tersembunyi dibelakang content pada class=content. Berikut mari dilihat penampakannnya seperti apa :

1.Membuat Fix Footer Dengan HTML CSS

Demikian pembahasan yang bisa saya berikan semoga bermanfaat dan sampai bertemu lagi dengan pembahasan atau tutorial lainya.

Teima kasih