Search code examples
htmlcssfooterstickysticky-footer

How to get the sticky footer to work?

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?

Solution

  • 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;
}