How can I force my footer to stick to the bottom of any page in CSS?

Question

This is my code:

#footer {
   font-size: 10px;
   position:absolute;
   bottom:0;
   background:#ffffff;
}

I\'ve no idea what is wrong with

Answer 1

The wrapper is the rest of your page. The negative/positive margin/height values are where the magic happens.

.wrapper 
  {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px;
  }
.footer, .push 
  {
    height: 142px; /* .push must be the same height as .footer */
  }