So, I've been wanting to do this for a while now.

Sticky Footers: The effect via which the footer on your page stays at a certain offset from the top, preferably near the bottom of your page if there is less content, ie it does not come up onto your content, and if the content overflows the screen then the footer follows it.

How I did it is pretty simple. I started out with a page which has a header, followed by a content div, followed by my footer.

First, I assign the page to be one full screen.


html, body {height: 100%;}


When you specify height in percentage, it is taken as x percent of the containing element. In this case the viewport or screen is the containing element of the html tag, and the html tag is the containing element of the body tag. So in essence the body is assigned the height of one screen.


#content {min-height: 70%;}


You next assign your div with id content to a minimum height of 70% of the containing element, ie the body. So at a minimum even if there's no content to fill it up it takes up 70% of your screen and your footer's 70% from the top.

If the content overflows one screen the height is automatically adjusted.

NOTE: IE doesn't understand the concept of minumum height so for IE be sure to include this in your CSS.


*html #content {height: 70%;}


NOTE: Your browser should be interpreting code in strict mode. To ensure this, add this tag to your HTML page.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Courtesy: Article on CSS Height.