Css Html Footer Sticky Footer

Cara Membuat Footer Tetap di Bawah Halaman Web

Membuat halaman web yang mempertahankan strukturnya di berbagai browser kadang-kadang bisa menjadi tantangan. Salah satu masalah umum yang dihadapi banyak pengembang adalah memastikan bahwa footer tetap di bagian bawah halaman, terlepas dari tinggi konten. Jika Anda mengalami kesulitan dengan masalah ini, Anda telah datang ke tempat yang tepat. Dalam posting ini, kita akan membahas pendekatan sederhana untuk mencapai sticky footer yang tetap terikat di bagian bawah halaman Anda.

Saat merancang tata letak sederhana dengan dua kolom, Anda mungkin mengalami situasi di mana footer tidak berfungsi seperti yang diharapkan. Tidak jarang footer mengapung canggung di tengah halaman ketika tidak ada cukup konten untuk mendorongnya ke bawah. Sebaliknya, ketika ada cukup konten, itu berfungsi seperti yang dimaksudkan – itulah mengapa menemukan perbaikan sementara atau solusi alternatif bisa sangat membuat frustrasi.

Memiliki footer yang menempel di bagian bawah meningkatkan pengalaman pengguna dengan:

  • Memberikan akses mudah ke tautan penting.
  • Meningkatkan estetika secara keseluruhan.
  • Menjamin konsistensi di berbagai ukuran layar dan perangkat.

Untuk memastikan footer Anda tetap terikat di bagian bawah halaman, kita akan menggunakan kombinasi sederhana dari CSS dan HTML. Mari kita uraikan langkah-langkah yang diperlukan untuk mencapainya.

Panduan Langkah demi Langkah

  1. Bungkus Konten Anda
    Pertama, Anda perlu membuat sebuah <div> untuk konten utama Anda. Beri kelas wrapper.

    <div class="wrapper">
    <!-- Konten Anda di sini -->

  2. Tambahkan Div Pendorong
    Tepat sebelum tag penutup </div> dari wrapper, masukkan <div> kosong dengan kelas push. Elemen ini akan memastikan tinggi footer diperhitungkan.

    <div class="push"></div>
</div> <!-- Akhir dari wrapper -->

  3. Sisipkan Footer
    Sekarang, setelah tag penutup wrapper, buat <div> footer dan beri kelas footer.

    <div class="footer">
    <!-- Konten footer di sini -->
</div>

Struktur HTML Lengkap

HTML Anda seharusnya sekarang terlihat seperti ini:

<div class="wrapper">
    <!-- Konten Anda di sini -->
    <div class="push"></div>
</div>
<div class="footer">
    <!-- Konten footer di sini -->
</div>

Gaya CSS yang Diperlukan

Untuk memastikan bahwa tata letak Anda berfungsi dengan benar, terapkan CSS berikut:

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* Margin bawah adalah nilai negatif dari tinggi footer */
}
.footer, .push {
    height: 142px; /* .push harus sesuai dengan tinggi .footer */
}

Pemikiran Akhir

Dengan langkah-langkah yang diuraikan di atas, Anda seharusnya sekarang memiliki sticky footer yang fungsional yang meningkatkan kegunaan situs web Anda. Pengaturan ini memastikan bahwa saat konten Anda menyesuaikan, footer Anda berfungsi sesuai harapan di berbagai browser.

Ingat, selalu uji desain Anda di beberapa browser untuk menjamin perilaku yang konsisten. Dengan menerapkan solusi ini, Anda bisa mencegah masalah tata letak yang tidak diinginkan dan menyajikan tampilan yang rapi dan profesional kepada pengunjung Anda.

Jika Anda menikmati panduan ini atau memiliki pertanyaan, jangan ragu untuk meninggalkan komentar di bawah! Selamat coding!