Why the footer is not sticked to bottom?


I noticed the glitch that i can't remove somehow, on all pages of the website the grey footer is not sticked to the bottom of the screen...

Here is the small page:

As i can see the white space under footer belongs to <body> tag but i can't fix this.

I tried:

position: absolute;

But in did not help, also as changing padding, margin styles of body, content or footer.

Help please.

Problem courtesy of: Feanor


The problem I'm finding has to do with the line-height property set on your body tag. Removing that property seems to fix the issue.

I would recommend using line-height only where necessary (ex. If you need to use it on your nav or in your content tag, do it).

Hope that helps!

EDIT: Setting position: absolute will work if its parent container is position: relative.

I got it to work like so:

.b-footer {
  position: absolute;
  width: 100%;

and you want to add position: relative to your .b-content container so the absolute works. I see it working in Chrome right now.

Solution courtesy of: Morklympious


You seem to have a button there.

Find the following line:

    <button id="authorize-button" style="visibility: hidden">Authorize</button>

and remove it, or do something about it. Perhaps move it up

Discussion courtesy of: Dawid O

This recipe can be found in it's original form on Stack Over Flow.