When your content doesn't fill the page, the footer won't stay at the bottom of the page by default.
There are a lot of solutions available to solve this with javascript, CSS tables, and using .fixed. I don't like these hacky solutions that provide inconsistent results. Using CSS flex, you can achieve the desired results consistently using only CSS.
First, add a class to your body. I prefer to use the site name for easier file searching. In this case, let's name it sample.
<body class="sample-body">
...
</div>
Next, wrap your content like so:
<body class="sample-body">
<div class="sample-content">
...
</div>
...more