How to stick footer to bottom? With a little twist

Question

So basicly i want to stick footer on the bottom of my page

But the content of my page is dynamic, so in some cases the content is long, in some cases it is short

I've searched through google and found many results, but when i try it, they work when the content is short, but if the content is long it will stick on the bottom of the window (not page) and overlap the content

It's not matter if it uses javascript, but if you have the pure CSS ones it will be better

Answer 1

This doesn't use a fixed position so it won't always show up at the bottom of your viewport.

CSS from here

You can also see a discussion about this here

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

/*

Sticky Footer by Ryan Fait
http://ryanfait.com/

*/

Answer 2

#footer{
    position:fixed; 
    bottom:0;
    height:200px;
}

body
{
    min-height:100%;
    padding-bottom:200px; /* same as footer height */
}

Answer 3

I could find a css solution ( Not 100% )

#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');
}

at this link below Fixed css footer

You can take also look into other SO postings

Footer position bottom and center

how to make footer fixed in a page