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

This isn't working? http://stackoverflow.com/questions/42294/how-do-you-get-the-footer-to-stay-at-the-bottom-of-a-web-page?rq=1 — GrayB, Jan 06 '13 at 05:08
Can you post , your trail code what you have used . we can help you — Aravind.HU, Jan 06 '13 at 05:18
@grayb: I've tried, but it doesn"t work. I can' t try it again now,because I'm using phone — gamehelp16, Jan 06 '13 at 05:32
@aravind: the "overlap" ones uses position:absolute, I can't post complete code because I'm using phone now — gamehelp16, Jan 06 '13 at 05:33
@gamehelp16 You have adjusted the height to be the same as your footer size? Made it so the wrapper class includes all the content apart from the footer class? — GrayB, Jan 06 '13 at 05:33
@grayb adjust the height of what? The "pusher"? I've tried but it fails. When I'm back to home I will try again — gamehelp16, Jan 06 '13 at 05:49
The height needs to be the same for the pusher and footer classes and also the negative margin of the wrapper class. If you have some example code, I will try to help you further — GrayB, Jan 06 '13 at 05:54
@GrayB thanks, now it works :D My problem is just on wrong implementation :D — gamehelp16, Jan 06 '13 at 07:19

score 2 · Answer 1 · answered Jan 06 '13 at 05:09

2

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

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

answered Jan 06 '13 at 05:09

Popnoodles

28,090
2
45
53

I will try it again later – gamehelp16 Jan 06 '13 at 05:56
i've tried it, but i don't want the footer to stick at the bottom of the window, but stick to the bottom of the document – gamehelp16 Jan 06 '13 at 06:53
sorry I misunderstood. Can you clarify what you want? Perhaps you mean "When the content height + footer height is less than the window height how do I stick the footer to the bottom of the window?" – Popnoodles Jan 06 '13 at 07:31
so i want the footer sticks to the bottom if the content's length is less then the window's height and if the length of the content is more than the window's height the footer will be under the content. By the way it's solved now – gamehelp16 Jan 06 '13 at 07:49

score 1 · Accepted Answer · edited May 23 '17 at 12:26

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/

*/

score 0 · Answer 3 · edited May 23 '17 at 10:24

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

How to stick footer to bottom? With a little twist

3 Answers3

Linked