Yeah if the official footer component fits your needs then it’s nice because we keep it up-to-date for you, but some people will want a different layout.
I’ve done something like this in the past… it’s a similar process to OP. You set the #main-outlet height to be 100% of the viewport height (100vh) minus the height of the footer and header. So on short pages your footer will now sit right at the bottom.
#main-outlet {
box-sizing: border-box; // includes padding in height calculation
}
<script type="text/x-handlebars" data-template-name="/connectors/below-footer/my-footer">
My footer content
</script>
<script type="text/discourse-plugin" version="0.8">
api.decoratePluginOutlet(
"below-footer",
(elem, args) => {
let headerHeight = document.querySelector(".d-header").offsetHeight;
let footerHeight = document.querySelector(".below-footer-outlet").offsetHeight;
let mainOffset = headerHeight + footerHeight;
document.querySelector("#main-outlet").style.minHeight = "calc(100vh - " + mainOffset + "px)";
}
);
</script>
It comes up often enough that it’s probably worth doing something like this in core automatically if there’s content in footer.html or either of the two footer plugin outlets.