Sticky Footer

by Taufik Nurrohman

HTML

<article>
    <div>Lorem ipsum dolor sit amet...</div>
</article>
<footer>Footer</footer>

CSS

html,body {height:100%;}

article {
    min-height:100%;
    border-left:2px solid red;
}

article div {
    overflow:auto;
    padding-bottom:30px; /* Samakan dengan tinggi footer */
}

footer {
    position:relative;
    clear:both;
    height:30px; /* Tinggi footer */
    line-height:30px;
    padding:0 15px;
    margin-top:-30px; /* Angkat ke atas setinggi 'tinggi footer' */
    background-color:black;
    color:white;
}

JavaScript

// Sticky footer berbeda dengan fixed footer.
// Sticky itu tidak fixed.