Can not get CSS Sticky footer to work. What am I doing wrong?

StackOverflow https://stackoverflow.com/questions/159487

  •  03-07-2019
  •  | 
  •  

Question

Well, this is my first post here and really enjoying the site.

I have a very basic (ugly as sin) site I have started and for some reason, I can not get the CSS Sticky footer to work for FireFox. IE works but FF shows it halfway up the page.

The URL is http://dev.aipoker.co.uk

I know I should be developing in FF and bug fixing in IE so I am guessing I might have actually made a mistake and somehow it works in IE but nowhere else.

Can anyone help put me out of my misery please?

Thanks, guys and gals.

Was it helpful?

Solution

Try this one, it works well on Firefox.

BTW, you should listen to Boagworld's podcast if you don't already. It's brilliant! :)

Cheers.

OTHER TIPS

I've had success with code like this:

footer { 
  display: block; 
  position: absolute; 
  width: 100%; 
  bottom: 0px; 
}

The minimal changes I can see to do this would be:

  • move footerSection inside of body
  • set position absolute on both body and footerSection
  • set bottom = 0px on footerSection

which ends up with something like this in your head:

<style type="text/css">
  #body, #footerSection { position: absolute; }
  #footerSection { bottom: 0px; }
</style>

<div id="body">
   ...
   <div id="footerSection">
      ...
   </div>
</div>

This is all you need to know about css only sticky footers & sticky navs:

Stick to bottom of page 

Position: absolute;
top:auto;
bottom: 0;

Stick to bottom of screen

Position: fixed;
top:auto;
bottom:0;

Any issues and it's probably due to where you placed your html code (don't make the footer a child element unless it's sticking to the content wrapper), or overlapping CSS.

You can apply the same technique to sticky navigation by flipping the auto & top. It'sis cross browser compatible (From memory from IE7 and above) including mobiles.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top