HTML, CSS - Sticky footer displays over content on screen resize

css, footer, html

Solution

Check out this sticky footer tutorial. The following code should be all you need.

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

/*

Sticky Footer by Ryan Fait
http://ryanfait.com/

*/

Edit:

Your negative value in your wrapper does not match the height of the footer. That is most likely part of your issue.

#wrapper {
    min-height: 100%;
    min-width: 450px;
    height: auto !important;
    height: 100%;
    /* your old code: margin: 0 auto -4em;*/
    margin: 0 auto -83px;
}

footer {    
    background: url('images/foot_bg.jpg') center no-repeat,
    url('images/foot_liq_bg.jpg') repeat;
    position:absolute;
    bottom:0;
    width:100%;
    height:83px;
    min-width: 450px;
}

Edit:

You do not have the height set to 100% on the html and the body. Therefore, the body will only be set to 100% of its parent (html) which is not 100% of the browser. You must have the html's height set to 100% as well for it to work.

Problem

Please refer to my site [removed] My footer displays at the end of the viewport as intended. When the screen is resized vertically the footer will overlap everything above it. How can this be avoided?

Original source