Make a footer fill the remainder of the page with variable height content

Question

Can someone point me in the right direction to make a footer fill the remainder of the page, when the body is variable height. All solutions I can find assume the header & body are of fixed height. Thanks in advance!

Answer 1

Get the height of the page content and the browser window via JS and set the height of the footer to heightofpage-heightofcontent.

let pagecontentheight = document.getElementById('pagecontent').offsetHeight;
let browserheight= window.innerHeight;

let footer= document.getElementById('footer');
footer.style.height = browserheight - pagecontentheight;

This will not work like that but It'll give you an idea of what I mean.