Best way to force footer to bottom on short topics?

[StraygoatWriting]

Hi All,

I've not been using Flare for a while, so have gotten a little rusty. Can anyone recommend a way of getting a footer div to behave like this:

If topic is long, footer appears at bottom, off the screen (viewport). You would only see footer if you scrolled down.
If topic is short, the footer appears at the bottom of the screen and the content area is made larger to accommodate the extra space.

I used to have this working on an old project, but can't remember how I did it. Any tips?

[cdschroeder]

I set my footer as absolute bottom left, like this:

Code: Select all

div.footer
{
     width: 100%;
     position: absolute;
     bottom: 0;
     left: 0;
}

Then my div.content has a padding-bottom of 12em to prevent overlap on long topics. You would set this padding as equal to or slightly greater than the height of your footer.

[StraygoatWriting]

Thanks, I will give that a go. It looks very similar to what I tried yesterday, though, so maybe it needs something else? Do you have the body set to any particular height or min-height?

[cdschroeder]

Thanks, I will give that a go. It looks very similar to what I tried yesterday, though, so maybe it needs something else? Do you have the body set to any particular height or min-height?

Nope! Just added padding to the bottom of the content div.

[StraygoatWriting]

ok. Is your footer in the same container div as your body content or is it in a separate one outside? I've got a complex structure and it is hard to keep track.

[cdschroeder]

ok. Is your footer in the same container div as your body content or is it in a separate one outside? I've got a complex structure and it is hard to keep track.

My footer div is inside my content div. The body proxy is in a separate container, but is also within the content div. My structure goes something like this:

div.content

• {more divs that MadCap adds}
  • div.sections
    • div.left-content {contains miniTOC proxy}
    • div.center-content {contains body proxy}
    • div.right-content {contains another menu}
  • div.footer