Can't get footer to stay at bottom of page

[likeller]

Hi folks,

Try as I might I can't get a one-line copyright to remain at the very bottom of the browser in my online help.

I've put it into a masterpge, gave it position: absolute; left; 0; bottom; 0
I gave the parent element (a div that the body is also contained in) position: relative; height: 100%

That is as per code I found online.

On longer pages that need scrolling, the copyright is indeed at the bottom of the page. On shorter pages however it's stuck in the middle of the screen just below the body content.
Note, I'm not actually using a MadCap footer style, I made my own paragraph style. It seemed to not make a difference though. If anyone can walk me through the exact steps that would be fantastic, thanks!

[likeller]

So I managed to get it almost working by moving the footer out of the div and putting the parent element positioning on the next level up which is the body itself.

(To clarify, in my last post I did not mean the body element is in my div but the MadCap bodyproxy).

Now that my footer stays at the bottom my next issue is that it goes *lower* than the bottom of the visible screen on short pages, so that you need to scroll to see it. A short term fix was to position it about 30 or 40px up from the bottom but that ugly scroll bar is still there, with just blank space under the footer. Is there a reason the pages are loading longer than the visible browser? This also happens when the browser is maximized.

[Mike Kelley]

You're definitely on the right track. To make a footer attach to the bottom of the document, you definitely need to use absolute positioning, with bottom set to 0. However, if that element has ANY ancestor that is set to position: relative; then the absolutely positioned element will be positioned absolutely, in relation to the relatively positioned ancestor. I know that might seem confusing. I did a webinar a few months back on this very subject. It has some great visuals that help clearly describe how the position rule works. I highly recommend you watch that to get a better understanding of what you've experienced.

As to solving your issue, your footer element probably has some margin settings. Try setting bottom back to 0, and make sure margin is also set to 0 on that element.

Code: Select all

.footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;  // I'm assuming you want it to span the full page
  margin: 0;
}

This is almost line-for-line what my footer container rules are.