How to push a footer to the bottom of page when content is short or missing?

Question

I have a page with an outer div that wraps a header, content and footer div. I want the footer div to hug the bottom of the browser, even when the content div is not tall e

Answer 1

What I wanted was to have the footer be at the bottom of browser view ONLY IF the content was not long enough to fill up the browser window (non-sticky).

I was able to achieve by using the CSS function calc(). Which is supported by all modern browsers. You could use like:

CONTENT
FOOTER

the css:

.container
{
    min-height: 70%;
    min-height: -webkit-calc(100% - 186px);
    min-height: -moz-calc(100% - 186px);
    min-height: calc(100% - 186px);
}

Change 186 to the size of your footer.