Tempelkan Footer di Bagian Bawah Halaman Tapi Tidak Diperbaiki

sukma
sukma
4 minute read

Salah satu proyek web saya baru-baru ini perlu membuat footer di bagian bawah halaman tetapi tidak diperbaiki hanya dengan menggunakan CSS. Niat pertama saya membuat saya menggunakan file position: fixed;Properti.

Tetapi klien tidak ingin footer selalu terlihat di halaman web. Dia ingin menjaga footer selalu di bagian bawah halaman konten pendek untuk menghindari footer mengambang di suatu tempat di udara.

Klien memiliki tiga persyaratan berikut untuk menjalankan footer:

  • Footer harus terlihat jika konten lebih pendek dari tinggi viewport pengguna.
  • Jika ada cukup konten dan lebih tinggi dari tinggi viewport pengguna, maka halaman akan mendorong footer lebih rendah dan akan menghilang dari viewport seperti biasanya.
  • Hal terpenting ketiga itu harus dilakukan tanpa Javascript dan tanpa menggunakan ekstensi
  • itu position: fixed;Properti.

Terkadang kami memiliki lebih sedikit konten di beberapa halaman situs web yang menyebabkan footer melayang di suatu tempat di udara. Solusi kami dirancang dengan sempurna untuk tujuan ini.

Dalam tutorial kami sebelumnya, kami melakukan percobaan dengan membuat Javascript Responsive Stick Footer yang juga dapat Anda periksa jika Anda tidak dapat berkompromi dengan kompatibilitas browser.

Solusi ini akan menempelkan footer alih-alih memperbaikinya sehingga selalu terlihat apakah ketinggian viewport kurang atau lebih - Tidak masalah.

Ketika kita memiliki cukup konten pada halaman itu mendorong footer di bagian bawah halaman tetapi masalah muncul ketika kita memiliki lebih sedikit konten di halaman, footer yang melekat akan menggantung footer di suatu tempat di tengah halaman.

HTML kami sederhana dan dasar, Kami telah mendefinisikan tiga elemen dasar. Kami memiliki elemen header, konten, dan footer.

Anda dapat menempatkan apapun di dalam elemen untuk mulai mendesain halaman web Anda. Kami telah menempatkan beberapa konten di dalam konten wadah utama kami.

<html lang="en" > <body>     <header>        This is our header of website.     </header>     <div class="content">       <p>It's a content area where you can place all the content and can define all of HTML element. Whenever I do design a website, I often make the footer fixed at bottom of page, even content is too short to push it to the bottom of browser window naturally.</p>       <p>However, if the content is good enough then the footer should disappear from browser window as it should normally without fixed to the viewport.</p>       <p>If you want to set the fixed height for footer than make sure to add padding-bottom of the footer's parent element to the same value or larger if you need some spacing. </p>       <p>It will help you to prevent the footer from overlapping the content area.</p>     </div>     <div class="footer">         It's a footer area that always positioned at the bottom of the page, but <strong>not fixed</strong>.     </div> </body> </html>

Sekarang kita akan melihat CSS. Mari kita mulai dengan mengatur tinggi 100% untuk elemen HTML. Elemen tubuh membutuhkan perhatian. Kami akan menggunakan posisi relatif karena kami akan menangani footer lengket menggunakan posisi absolut.

Sedangkan untuk area konten, kami akan menerapkan beberapa gaya dasar yang meliputi margin, beberapa padding atas, lebar-maksimal untuk desain responsif dan font-family untuk menyiapkan demo yang bagus.

html {   height: 100%;   box-sizing: border-box; } *, *:before, *:after {   box-sizing: inherit; } body {   position: relative;   margin: 0;   padding-bottom: 6rem;   min-height: 100%; } .content {   margin: 0 auto;   padding-top: 64px;   max-width: 640px;   width: 94%;   font-family: "Raleway",sans-serif;   line-height: 30px; } .content h1 {   margin-top: 0; } /**  * Footer Styles  */ .footer {     position: absolute;     right: 0;     bottom: 0;     left: 0;     padding: 1rem;     background-color: #d94575;     text-align: center;     color: #fff; }

Terakhir, gaya footer terakhir yang paling penting harus membuat tetap di bagian bawah tetapi tentu saja tidak tetap. Kami akan mengambil bantuan dari posisi: mutlak; elemen dan akan mengatur semua nilai poin ke nol kecuali bagian atas.

Penting untuk menyetel nilai poin kanan, kiri, dan bawah ke nol sehingga footer tetap berada di tengah area pandang.