Make Footer stay to the bottom of the given window

[maxcell]

Bug report

What is the current behavior?

The current behavior is that the footer touches the bottom of the content and not the bottom of the page. So when a user goes to a page where the content is short, the footer jumps up to reveal empty white space.

For example this is on the contact page on heights of 1064px and higher:

If the current behavior is a bug, please provide the steps to reproduce.

• Open the page in Chrome https://gatsby-starter-netlify-cms-ci.netlify.app/contact/
• Zoom out to about 50%

Or

• Open the page in Chrome https://gatsby-starter-netlify-cms-ci.netlify.app/contact/
• On a large screen extend the height past 1064px

Or

Only open a page to induce a 404 https://gatsby-starter-netlify-cms-ci.netlify.app/test

What is the expected behavior?
The expected behavior is that the footer should be touching the bottom of the screen no matter the size of the content or the resolution of the screen.

(Note this is a zoomed out picture)

Other relevant information:
This happens on every browser.

Helpful Resources
ModernCSS - Keep the Footer at the Bottom with Flexbox vs. Grid

I approached this issue here #801