How to get the sticky footer to work?

Question

I'm trying to figure out how to get the footer to stick to the bottom of the page in the css of http://bit.ly/138xOAB

I've tried alot of things which were said in tutorials, such as:

the position absolute,
bottom:0,
and min-height of the container 100%,
height of the body 100%,

But none of those things turned out well.

You can see the HTML and CSS by inspecting the website. I can't get the proper code over here.

Can someone help me, maybe there is something wrong in the HTML?

`You can see the HTML and CSS by inspecting the website. I can't get the proper code over here.` You can always copy the relevant code from the element inspector. Or right click->view source.. — SW4, Dec 17 '14 at 08:15
There are so many [sticky footer posts](https://stackoverflow.com/questions/27417878/css-maintain-page-height/27418284) out there... — SubjectCurio, Dec 17 '14 at 08:18
remove position:absolute from your footer. Or if you want footer to be shown all the time, then use position:fixed and appropriate margins/paddings as for your needs — trainoasis, Dec 17 '14 at 08:18

Rahul Desai · Accepted Answer · 2014-12-17T08:45:08.437

0

The problem with you footer's position: absolute; is that it will hide the other elements behind it.

Your footer can be best viewed if you remove position: absolute; so as to show all elements and add margin-top: 20px; for some gap in between the footer and the element before it..

Try it.

EDIT:

If you want the footer to be always float on the screen, use the following CSS (comments inline):

.container {
  max-width: 1200px;
  margin: auto;
  padding: 0px 3%;
  margin-bottom: 250px; /* so that all content is visible */
}

.footer {
  background: #efefef;
  position: fixed; /* so that the footer floats */
  overflow: auto;
  bottom: 0px; /* float at bottom */
  padding-top: 20px;
  padding-bottom: 20px;
  height: 180px;
  width: 100%;
  margin-top: 20px;
}

edited Dec 17 '14 at 08:45

answered Dec 17 '14 at 08:15

Rahul Desai

15,242
19
83
138

Thanks, I'd tried but it still wont float at the bottom after the content. – HugOnline Dec 17 '14 at 08:36
@HugOnline Please see the **EDIT** in my answer above. – Rahul Desai Dec 17 '14 at 08:45
Thanks Rahul for your help! The thing is, I want it to be at the bottom of the page, not the bottom of the screen. Can u please help me with that? – HugOnline Dec 17 '14 at 08:55
@HugOnline My first solution was for that only. :) – Rahul Desai Dec 17 '14 at 09:20
@HugOnline Let me know if you have any more questions. If you think this answer has solved your problem, please mark it as accepted. – Rahul Desai Dec 17 '14 at 09:21

score 0 · Answer 2 · answered Dec 17 '14 at 08:22

0

Remove "position: absolute" and "bottom: 0" from the .footer class. I think that fixes your issue. And add a small margin above the footer so there is a small space between the content and the footer.

answered Dec 17 '14 at 08:22

Vishnu M.

971
1
10
18

Thanks, but when you take a look at another page, registration for example, you see the footer floating instead of pushed down. – HugOnline Dec 17 '14 at 08:35

How to get the sticky footer to work?

2 Answers2