Can't keep footer at the bottom of the page

Question

I have been following this tutorial on how to keep the footer at the bottom of the page, even when there isn't much content: http://www.cssreset.com/how-to-keep-footer-at-bottom-of-page-with-css/

As far as I can tell, I have put in all of the necessary properties specified by the tutorial, but the footer still won't stick to the bottom of the page.

When I looked at the page using firebug, I could see that the HTML and body had a height of 100%, but despite using "min-height: 100%;" for #wrapper, it still does not fill 100% of the window.

Here are the important sections of the CSS, but if you want to see the full source code, it is live here: http://ewanroycroft.co.uk/bc/

html {
    padding: 0;
    margin: 0;
    height: 100%;
}
body {
    width: 100%;
    height: auto;
    min-height: 100%;
    padding: 0;
    margin: 0;
    font-family: 'Trebuchet MS', Helvetica, sans-serif;
    background-color: #E9E9E9;
}
#wrapper {
    width: 100%;
    height: 100%;
    position: relative;
}
#headerWrap {
    width: 100%;
    height: 120px;
    min-width: 600px;
    padding-bottom: 1px;
    background: url("images/bg-header.png") repeat-x scroll left bottom #FFFFFF;
}
#content {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    min-width: 600px;
    max-width: 900px;
    margin: 0 auto 0 auto;
    padding: 0px 25px 80px 25px;
}
#footerWrap {
    clear: both;
    width: 100%;
    height: 80px;
    min-width: 600px;
    background-color: #231F20;
    box-shadow: 0px 0px 10px 0px #231F20;
    position: absolute;
    bottom: 0;
}

Thanks in advance for your help!

Answer 1

There's two things that you're missing according to the guide that you posted:

• Set the body's height to 100%. It is currently auto.
• Don't set height for the wrapper. Instead, set min-height.

After that, it should behave like you expect.