Search code examples
cssfirefoxsticky-footer

Sticky footer is causing extra height on the page?

I am trying to make a sticky footer, and my page's html structure is like this: (vastly simplified)

<head>...</head>
<body>
   <div class="centerPane">
      <div class="userCenter">..</div>
      <div class="bottom>...</div>
   </div> 
</body>

css:

head
{
   height: 100%;
}
body
{
   min-height: 100%;
   height: 100%;
}

.userCenter
{
   position:relative;
   height: 100%;
}

.bottom
{
   position: absolute;
   bottom: 20px;
   height: 30px;
}

For some reason, this is pushing the bottom OFF BEYOND the bottom of the page regardless of the browser window size on firefox 10.0.1.

Here is a demo: 173.228.119.111:3000/users/sign_in

Solution

  • not quite sure what the problem is, but I would take a look at this http://www.cssstickyfooter.com/using-sticky-footer-code.html you seem to be missing some css...