[Solved] Footer won't stay at bottom of browser window

[Russell]

Hello:

I’ve got a site here:
http://testing003.compoundeyedesign.com/contact-us.html

I can’t get the footer div to stay fixed to the bottom of the browser window. If you scroll down, the footer bar will move upwards. If you can’t recreate it, it looks like this:
http://note.io/1yx7njq

The relevant CSS is:

.footer {
font-size: .8em;
position: absolute;
bottom: 0;
width: 100%;
padding-top:10px;
padding-bottom:10px;
background-color: #f5f5f5;
}

Any ideas why this might not be working properly? Thanks in advance.

Kind regards, Russell

[Alen]

@hrachovec

You need to set parent element to position: relative;. So:

body {
  position: relative;
}

[Shikkediel]

Or lose the positioning altogether (nothing after it)… but if you want it to stay at the bottom of the screen it would have to be position: fixed.

[Russell]

Hi Shikkediel and Alen:

Thanks for your feedback. I tried both suggestions and it appeared that Shikkediel’s recommendation of adding position: fixed to the .footer class did the trick.

Thanks for your help.

Cheers, R

[Author]

Posts