footer to bottom (sticky footer)

CSS:

body, html { /* cannot have margin, padding or border styles because scrollbar will appear */
    height: 100%;
}
.wrap { /* cannot have margin, padding or border styles because scrollbar will appear */
    min-height: 100%;
    height: auto;
    margin-bottom: -80px; /* Negative indent footer by it's height */
}
.pusher { /* same height as height and margin-top in footer */
    clear: both;
    height: 80px;
}
.footer {
    height: 80px;
    background-color: #ffa;
}

HTML structure:

<div class="wrap">
    <div class="content">content</div>
    <div class="pusher"></div>
</div>
<div class="footer">footer</div>

Leave a Reply

Your email address will not be published. Required fields are marked *