Simple Tips sticky Footer

Publish Date : 18-01-2017 , dibaca 4134 kali, Hari ini dibaca : 1 kali ,0 comments

OK.. Tutorial kali ini kita akan membahas Cara Mudah Membuat Footer Tetap Berada dibawah meskipun content nya kosong , Tips ini cukup Simple Untuk Membuat Sticky Footer , dimana footer akan berada pada bagian paling bawah dan tetap dibawah walaupun contentnya tidak ada, jadi pas tingginya dengan layar jika minimal isinya sedikit, dan memanjang kebawah jika isi content melebihi kapasitas.

Pengertian Sticky Footer :

Apakah anda belum mengerti apa itu Sticky footer ,??? Sticky footer merupakan istilah footer yang menempati pas bagian bawah, yang selalu tetap dibawah walaupun tidak ada content atau artikel , nah untuk lebih jelasnya mungkin anda bisa lihat disini

HTML CODE :

<!DOCTYPE html>
<head>
    <title></title>
</head>
<body>
    <nav></nav>
    <article>Lorem ipsum...</article>
    <footer></footer>
</body>
</html>

CSS CODE :

    <style>
    html {
        position: relative;
        min-height: 100%;
    }
    body {
        margin: 0 0 100px; /* bottom = footer height */ yaitu: samakan dengan tinggi footer
    }
    footer {
        position: absolute;
        left: 0;
        bottom: 0;
        height: 100px;
        width: 100%;
        background-color: #FFA500;
    }
    </style>

Note : Tinggi footer harus sama dengan margin-bottom body

FULL CODE :

<!DOCTYPE html>
<head>
    <title></title>
    <style>
    html {
        position: relative;
        min-height: 100%;
    }
    body {
        margin: 0 0 100px; /* bottom = footer height */
    }
    footer {
        position: absolute;
        left: 0;
        bottom: 0;
        height: 100px;
        width: 100%;
        background-color: #FFA500;
    }
    </style>
</head>
<body>
    <nav></nav>
    <article>Lorem ipsum...</article>
    <footer></footer>
</body>
</html>