When there isn't much content on a page, your footer might end up halfway down the viewport. Here's how to fix that using flexbox.
The Result
The Introduction
This one's dead easy. It uses Flexbox, so if you don't have that option (IE...), this probably isn't the solution for you!
I did this in a Next.JS project with a custom Layout component. You can do the same no matter what you're using. (Next.JS is awesome, by the way.)
The Method
The problem was simple - when there wasn't much content on a page, the page would end abruptly. When you're using a non-white page background, this is a nightmare. See below.
I began by setting the min-height of my Layout container to 100vh - you could do this on <body> if you have easy access to it, but I'm lazy.
This worked... to a point. Sure, the white was gone, but the footer was halfway up the screen. So I needed another solution.
The solution? Flexbox on the Layout container. Add display: flex; flex-direction: column; to your Layout container styles (or <body>, as mentioned). Then, wrap your page content (excluding header and footer) in a <div> with flex: 1 0 auto;.
Here's a super, super simple example on GitHub. Try zooming in and out on your browser to see the effect.
Starting a business during the pandemic? I'm available for freelance, part-time, and full-time web development projects. Get in touch and let's have a chat!