Kita akan membuat header tetap berada di atas dan footer tetap berada di bawah jika posisi content di-scroll seperti pada gambar di atas. Walaupun content hanya berisi beberapa baris namun header dan footer tetap di posisinya.
Pada bagian div class fixed-header diberikan CSS properti top:0 untuk membuat header pada posisi atas layar dan pada bagian div class fixed-footer diberikan CSS properti bottom:0 untuk membuat footer pada posisi bawah layar. Untuk membuat posisi header dan footer tetap di posisinya, maka kita berikan CSS properti position: fixed; Walaupun halaman web ini di scroll namun posisi header tetap berada di atas dan footer tetap berada di bawah. Sebagai testing scroll halaman web diberikan CSS properti line-height: 100px; supaya halaman lebih panjang untuk scroll.
Berikut coding CSS dan HTML selengkapnya.
body { margin: 0; padding: 0; } nav a { color: #fff; text-decoration: none; padding: 10px; display: inline-block; } nav a:hover { background-color: red; } .fixed-header, .fixed-footer { width: 100%; position: fixed; background: #333; padding: 5px; color: #fff; } .fixed-header { top: 0; } .fixed-footer { bottom: 0; text-align: center; } .content { width: 100%; padding-top: 60px; padding-bottom: 50px; } .content p { line-height: 100px; padding: 10px; } <div class="fixed-header"> <a href="#">Home</a> <a href="#">About</a> <a href="#">Products</a> <a href="#">Contact Us</a> </div> <div class="content"> <h1>Membuat Fixed Header dan Footer dengan CSS</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum eu, tristique eget risus. Integer aliquet quam ut elit suscipit, id interdum neque porttitor. Integer faucibus ligula. </p> <p>Quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra sagittis quam at mattis. Suspendisse potenti. Aliquam sit amet gravida nibh, facilisis gravida odio. Phasellus auctor velit at lacus blandit, commodo iaculis justo viverra. Etiam vitae est arcu. Mauris vel congue dolor. Aliquam eget mi mi. Fusce quam tortor, commodo ac dui quis, bibendum viverra erat. Maecenas mattis lectus enim, quis tincidunt dui molestie euismod. Curabitur et diam tristique, accumsan nunc eu, hendrerit tellus. </p> </div> <div class="fixed-footer"> Copyright © 2021 </div>Selamat mencoba. Happy coding…
Share this:
Menyukai ini:
Suka Memuat...
Terkait
HTML <header> element merepresentasikan konten pengantar, pembukaan atau navigasi yang terdiri dari deretan link.
Dalam penggunaannya, <header> element dapat berisi element heading (<h1>-<h6>) tapi tidak diperlukan, daftar isi (table of contents), sebuah logo, form pencarian dan lain sebagainya.
<header> element bukanlah sebuah konten pemisah (sectioning content) karena ia bukanlah konten yang terdiri dari headings dan footers, karena jelas sekali dalam sebuah <header> tidak boleh terdapat element <header> lain.
Elemen <header> tidak boleh digunakan sebagai anak element (descendant) dari <article> <!-- header kedua --> <header> <h2>Mengenal Web Standard</h2> <p>Ditulis oleh: dul, <time datetime="2015-03-07T13:00">07 Maret 2015, pkl. 13:00</time> </p> </header> <p>Apa itu Web Standard? Web Standard adalah teknologi yang dibangun oleh W3C dan lainnya yang dikembangkan untuk menginterpretasikan konten web agar memiliki standar yang dapat dinikmati oleh semua kalangan dan dapat diakses di semua <em>device</em>(smartphone, tablet, desktop dan lain sebagainya).</p> </article> 0, <article> <!-- header kedua --> <header> <h2>Mengenal Web Standard</h2> <p>Ditulis oleh: dul, <time datetime="2015-03-07T13:00">07 Maret 2015, pkl. 13:00</time> </p> </header> <p>Apa itu Web Standard? Web Standard adalah teknologi yang dibangun oleh W3C dan lainnya yang dikembangkan untuk menginterpretasikan konten web agar memiliki standar yang dapat dinikmati oleh semua kalangan dan dapat diakses di semua <em>device</em>(smartphone, tablet, desktop dan lain sebagainya).</p> </article> 1, atau <header> lainnya.
Dalam sebuah dokumen, dapat ditemukan lebih dari satu <header> element.
Global Attributes
Atribut Secara Global (Keseluruhan)
<header> tag mencakup global attributes, yang artinya tag tersebut dapat disisipkan semua attributes yang termasuk dalam global attributes yang secara umum berlaku untuk semua HTML tags.
Silahkan, lihat referensi mengenai HTML Global Attribute
Event Attributes
Atribut event (Peristiwa)
<header> tag mencakup event attributes, yang artinya attribute tersebut dijalankan ketika ada interaksi dari user atau dalam suatu peristiwa (kejadian). Contoh: menjalankan script (JavaScript) ketika halaman web pada jendela browser hendak ditutup, dan lain sebagainya.
Silahkan, lihat referensi mengenai HTML Events Attribute
Example
Contoh HTML <header> element
Contoh 1<header> yang ditulis di dalam <body> element, sehingga dapat ditulis informasi yang berlaku pada dokumen secara keseluruhan.
HTML
<body> <!-- header pertama --> <header> <h1>apaCara Blog</h1> <nav> <ul> <li> <a href="#">Artikel Terbaru</a> </li> <li> <a href="#">Artikel Populer</a> </li> <li> <a href="#">Hubungi Kami</a> </li> </ul> </nav> </header> </body>
Contoh 2<header> ditulis didalam <article> element. Isinya berkenaan dengan catatan kepala dan informasi yang berkaitan dengan article tersebut.
HTML
<article> <!-- header kedua --> <header> <h2>Mengenal Web Standard</h2> <p>Ditulis oleh: dul, <time datetime="2015-03-07T13:00">07 Maret 2015, pkl. 13:00</time> </p> </header> <p>Apa itu Web Standard? Web Standard adalah teknologi yang dibangun oleh W3C dan lainnya yang dikembangkan untuk menginterpretasikan konten web agar memiliki standar yang dapat dinikmati oleh semua kalangan dan dapat diakses di semua <em>device</em>(smartphone, tablet, desktop dan lain sebagainya).</p> </article>
Jika Contoh 1 dan Contoh 2 digabungkan, maka hasilnya dapat dilihat pada demo editor dibawah ini:
Contoh Lengkap
Contoh source code lengkap disertai dengan link "editor" untuk mencoba (try it) dan melihat hasil (preview) kode.