want footer to stay at bottom, but not absolute

Question

am making a website, and have a wrapper on the footer, i want the footer as sticky footer, but when i minimise the screen and make it smaller the footer overtakes the content and header.

    #footerWrapper {
 height: 177px;
 bottom: 0;
 position: absolute;
 width: 100%;
 }

This does what i want as it makes the footer go to the bottom of the page regardless of what size the screen is. however when i minimise the screen and move it up it stays absolute hence staying in that 1 page.

as i would want it to stay on the page rather than the footer being absolute.

any ideas.

Answer 1

I was able to keep the footer sticky and not overtake the header by using z-index. Just give the higher DIVs higher z-indexes.

    #headWrapper {
        padding-bottom: 0px;
        position: relative;
    }
    #headWrapper {
        z-index: 2;
    height: 160px;
        /* width: 960px; */
        margin: 0 auto;
        background: url(/images/PageImages/homeHeadBack.png) repeat-x;
    }

    #footerWrapper {
        background: url(/images/PageImages/footerBack.png) repeat-x;
        height: 177px;
        position: absolute;
        width: 100%;
        bottom: 0;
        z-index: 1;
    }

Please note that #headWrapper needs to specify position:relative. I think you may start from this. Worked on Chrome.