Membuat Header dan Footer tetap di atas dan di bawah

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 &copy; 2021
    </div>

Selamat mencoba. Happy coding…