Sticky footer with full-height div
There’s been a lot written on the subject of “sticky footers”, and Philip Walton sums it up perfectly:
Getting the footer to stick to the bottom of pages with sparse content is something just about every Web developer has tried to tackle at some point in his or her career. And, for the most part, it’s a solved problem. Yet all the existing solutions have one significant shortcoming — they don’t work if the height of your footer is unknown.
Many will say that CSS is the way to go, but as Mr. Walton says, that only works if the footer is a known, fixed height. Walton introduces a method using Flexbox, which supposedly works with variable-height footers. In the limited amount of time I spent playing around with it, I wasn’t able to get the Flexbox method to work with the page structure of my Twenty Sixteen child theme, but it’s probably something I’ll look further into when I have more time. For now, I’m using the same jQuery method that I used on my previous child theme:
jQuery(document).ready(function(){
var footer_height = jQuery("#footwrapper").height();
jQuery("#pushwrapper").css({'padding-bottom' : footer_height });
jQuery("#footwrapper").css({'margin-top' : -footer_height });
});I wish I had made a note of where I found this solution a couple of years ago so I could give the proper credit – I’ve been unable to find the same solution documented since then.
I also added the following bit of (middle-of-the-night-idea) code to the same file to take care of the problem of the containing <div> not reaching down to the bottom of the page when there is little content on the page.
//Dynamically assign height of content div
jQuery(document).ready(sizeContent);
jQuery(window).resize(sizeContent);
function sizeContent() {
var newHeight = jQuery(window).innerHeight() - (jQuery("#masthead").height() + jQuery("#footwrapper").height()) + "px";
jQuery(".site-inner").css("min-height", newHeight);
}Here’s what the same page look like with the sticky footer function in my child theme:
