force footer on bottom on pages with little content

Question

I have a page with only a couple of lines of content. I want the footer to be pushed to the bottom.

<div id="footer"></div>

I don't want to use

#footer
{
    position:fixed;
    bottom:0;
}

AKA Sticky Footer

Is this possible without jQuery?

any suggestions?

Answer 1

There is another sticky footer by Ryan Fait that doesn't use position fixed:

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */
    height: 100%;
    margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 155px; /* .push must be the same height as .footer */
}