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 Comment