css footer not displaying at the bottom of the page

https://stackoverflow.com/questions/15960290/css-footer-not-displaying-at-the-bottom-of-the-page

There‘s really two main options:

1. Fixed Footer - the footer always is visible at the bottom of the page
2. Pushed Footer - the footer is pushed to the bottom of the page even when the content doesn‘t fill the window

The easier of the two is the fixed footer.

Fixed Footer

To make the footer fixed, in CSS set the footer‘s position to fixed position:fixed and position the footer to the bottom of the page bottom:0px. Here‘s a code snippet from CSS-Tricks.

#footer {
   position:fixed;
   left:0px;
   bottom:0px;
   height:30px;
   width:100%;
   background:#999;
}

/* IE 6 */
* html #footer {
   position:absolute;
   top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+‘px‘);
}

Pushed Footer

A pushed footer is a bit trickier. Here‘s a great graphic showing why the footer doesn‘t stay at the bottom of the page when there isn‘t enough content:

Basically, the problem is happening because the footer element is ‘pushed‘ under the element that is above it and the height of that element isn‘t as long as the height of the page. In order to fix this, you need to make sure that the footer gets ‘pushed‘ down the full height of the page (minus the height of your footer).

Here‘s how to do it:

HTML

<div id="container">
   <div id="header"></div>
   <div id="body"></div>
   <div id="footer"></div>
</div>

CSS

html, body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}

Here‘s a more detailed tutorial on how to do it as well as the source of the code above.

And here‘s a working demo of the code from the same source.