Buat Footer Lengket Responsif Menggunakan JavaScript

sukma
sukma
3 minute read

Membuat Footer Lengket Responsif Menggunakan Javascript: Sudahkah Anda mencoba solusi CSS untuk membuat footer lengket? Bagaimana dengan Javascript?

Dengan bantuan beberapa baris, kami dapat dengan mudah memperbaiki footer di bagian bawah halaman dengan berbagai dukungan browser.

Saya mendengar banyak pengembang mengalami masalah dengan dukungan browser. Untuk ini, Kami memiliki solusi footer tetap Javascript ini. Ini juga responsif dan bekerja dengan baik dengan semua perangkat ponsel.

Dengan menggunakan Javascript bukan berarti saya tidak akan menggunakan CSS. Tentu saja, saya masih membutuhkan sedikit bantuan CSS untuk menjaga footer tetap di bagian bawah halaman.

Jika Anda mencari di Google, Anda mungkin menemukan banyak metode untuk membuat footer lengket responsif yang menjaga footer tetap di bagian bawah halaman.

Tetapi masalah dengan metode ini, mereka tidak sepenuhnya kompatibel dengan browser yang berbeda. Terutama, metode ini membuat masalah dengan browser lama, atau terkadang berfungsi dengan browser jendela tetapi tidak berfungsi dengan baik dengan browser seluler.

Hari ini, saya akan menunjukkan kepada Anda metode lain yang disebut Footer lengket JavaScript metode. Metode ini bekerja dengan baik dengan browser lama dan ringan, artinya Anda tidak perlu menambahkan banyak Javascript untuk memperbaiki footer Anda di bagian bawah halaman.

Terkadang orang tidak setuju menggunakan Jquery karena sesuatu yang sepele, dan mereka lebih suka menggunakan metode flexbox. Tetapi flexbox memiliki masalah dengan mendukung browser lama seperti IE6 hingga IE9, Opera-Mini 12 dan IE11 juga memiliki bug. Jadi menggunakan Jquery bukanlah hal yang buruk dan kita juga harus memiliki opsi dan alternatif yang berbeda.

Mari kita mulai dengan HTML yang sangat sederhana. Kami memiliki wadah utama yang akan memiliki konten dan kemudian elemen HTML5 yang disebut footer.

Footer akan tetap berada di akhir halaman, tidak peduli berapa banyak konten yang Anda miliki atau berapa pun tinggi kontennya. Kami tidak perlu membungkus dengan wadah apa pun div, Kami hanya menambahkan wadah div di atas footer tempat Anda diizinkan untuk menambahkan konten.

<html>   <body>     <div class="container">         <p>Your content area ....</p>     </div>     <footer>        Copyright © Codeconvey 2016. All rights reserved.     </footer>   </body> </html>

Gaya

CSS juga mudah, dan Kita hanya perlu mengatur posisi relative dan min-height 100% untuk tag elemen HTML.

Selanjutnya, kita akan membuat posisi: absolut; dan setel kiri / bawah ke nol. Kami juga memastikan bahwa kami menyetel lebar 100% sehingga footer akan penuh di seluruh jendela browser.

html {     position: relative;     min-height: 100%; } footer {     position: absolute;     left: 0;     bottom: 0;     height: auto;     width: 100%; }

Javascript

Terakhir, kami akan menambahkan sedikit javascript untuk menyelesaikan pekerjaan kami.

function footerAlign() {   $('footer').css('height', 'auto');   var footerHeight = $('footer').outerHeight();   $('body').css('padding-bottom', footerHeight);   $('footer').css('height', footerHeight); } $(document).ready(function(){   footerAlign(); }); $( window ).resize(function() {   footerAlign(); });

Itu semua tentang membuat footer sederhana yang menempel di bagian bawah halaman dengan menggunakan sedikit Javascript. Saya harap Anda akan merasakan manfaatnya. Jika Anda memiliki pertanyaan, harap beri tahu saya di bagian komentar di bawah.