Search code examples
csshtmlpositionfooterabsolute

footer with absolute position - responsive design

I have a little problem with my responsive design. I am using a normal <footer> with this style.

footer {
  width: 100%;
  height: 20px;
  position: absolute;
  bottom: 5px;
  left: 0;
}

It works fine and when I am using a smaller screen I have to scroll, that's normal.

The problem is that the <footer> is not at the bottom. It is in the middle of the screen. Like margin-top: 100% of the full screen, without scrolling.

I hope you understand what I mean.

Thanks!

Solution

  • Make Position fixed, This may look something like this

     footer {
  width: 100%;
  height: 20px;
  position: fixed;
  bottom: 5px;
  left: 0;
}