contact
WA: 0822-8846-7823
SMS: 0822-8846-7823
Call: 0822-8846-7823
BBM: D7DB3491
ebsofmail@gmail.com

Simple Tips sticky Footer

Posted in HTML & CSS Life at 18 Januari 2017 With 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 :

▼ Download Source Code Dibawah Ini ▼


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>

Artikel Rekomendasi



Artikel Terkait

Diskusi