Force footer table in masterpage to bottom of viewing pane?

[ChoccieMuffin]

Afternoon all

Output: HTML5 mixture of side-nav (regular topics) and top-nav (front page).
Flare version: 2020.

I have a footer table in my master page used for my topics, which I want to appear at the bottom of the viewing window on short topics rather than directly under the topic content. If the topic is longer than the viewing window I want it to be at the bottom of the topic. Is there any way I can achieve this?

This is what I've got, scroll down in the picture to see what I'm after:

Topic-layout.png

[techwriter31]

I recently did something similar for our Knowledge Base website footer when updating it to match the company website footer. The footer is pretty large and looked a bit strange on our minimal KB homepage, since it rested directly below the product links.

To fix it, I put the footer inside of a div. Then in the .css, I specified a top-margin for the div. It works pretty well and there is always the same amount of space between the body and the footer.

[ChoccieMuffin]

I recently did something similar for our Knowledge Base website footer when updating it to match the company website footer. The footer is pretty large and looked a bit strange on our minimal KB homepage, since it rested directly below the product links.

To fix it, I put the footer inside of a div. Then in the .css, I specified a top-margin for the div. It works pretty well and there is always the same amount of space between the body and the footer.

Don't think that'll do what I want, as that way we'll have lots of space between the end of a long topic and the footer, and the footer could appear in various different places on the page on shorter topics, depending on their length.

Any other suggestions?

[techwriter31]

If I remember correctly, I tried setting the position of the div to fixed as described here: https://www.w3schools.com/howto/howto_c ... footer.asp. However, my div footer extended beyond the right side of the browser and was cut off.

I also tried using absolute positioning as described in this forum post: viewtopic.php?f=9&t=27165#. I'm guessing the output in this post was for HTML5 top nav, since the footer extends over the HTML5 side nav pane. I was able to get it work for HTML5 sidenav by not setting the left-margin: 0. However, my footer is so tall, that when using absolute positioning, it would run directly under the body (even if I set a top-margin on the div) and it did not look like I wanted it to.

My current footer appears "sticky" for longer topics and shorter topics on smaller resolution monitors like my laptop. It also wraps nicely when viewed on mobile devices. However, on my extra wide monitor, there is some white space below the footer for the shorter topics. I would ideally like to have a sticky footer appearance for these shorter topics.

[Psider]

I have a couple of theories you could investigate, depending on what the code in the output looks like. I don't have access at the moment to play with an actual project at the moment.

1. If the footer is in a container inside the topic container, it might be possible to get part way there with sticky positioning. It's really dependent on how each person has their browser sized or what device they're using, though.

Say you have the following code:
<div class="topic">
<h1>Heading 1</h1>
<p>Content</p>
<div class="footer">
<p>Footer content</p>
</div>

You'd set a min-height on the topic container that's larger than your smallest piece of content and will, in theory, provide an acceptable gap between your content and the footer, although not stuck to the bottom of the window. Then you set the footer style to be sticky and define the top to the the full view height. For content smaller than 550px high, the footer will stick to the bottom of the topic container. After that it will just be in its normal place.
div.topic {
min-height: 550px;
}
div.footer {
position: sticky;
top: 100vh;
}

2. CSS Flex might work if the footer and topic container are at the same level.

So if it's this code:
<div class="container">
<div class="topic">
<h1>Heading 1</h1>
<p>Content</p>
</div>
<div class="footer">
<p>Footer content</p>
</div>
</div>

div.container {
display: flex;
justify-content: space-between;
height: calc(100vh - xxx);
}

The xxx is the sum of the height of all the "stuff" before the H1, such as the breadcrumbs container and site header, and includes any padding on, for example, the topic container. It can be a bit tricky to calculate.

[ChoccieMuffin]

Thanks psider and techwriter, I'll give your suggestions a thorough read and will let you know what I end up with. (I may be a while...)