Footer leaves bottom of the page and floats when there's not enough content to push it down

## Prerequisites
- [ x ] I have searched open and closed issues for duplicates.

## Describe the bug
When the height of the page is less than the viewport's, the footer floats some pixels above the bottom, due to not having enough content to push it down.

### To Reproduce
Steps to reproduce the behavior:
1. Go to any page with few content, not enough to fill the visible browser's space. The easiest way is to go to a 404 error page, like this one: https://blog.elementary.io/404
2. Look at the footer.

### Expected behavior
The footer should stay fixed to the bottom of the ``.

### Screenshots or screen recordings

## Platform Information
- Browser: Chromium 84.0.4147.105
- OS: Manjaro

- [ x ] I'm using the latest version from git that I've manually compiled
- [ x ] I'm using the latest released stable version

## Additional context
I noticed that the `` and `` tags are not filling the height of the page, so I added this to my local copy of the theme:

```css
html, body {
height: 100%;
}
```

However, though this made the page fill the viewport, it didn't fix the issue of the floating footer. I tried other solutions like setting `position: absolute;` to the footer and `position: relative;` to the ``, but to no avail.

These changes even triggered other weird bugs, like making the search bar icon float randomly and making the footer be stuck to a random part of the page with each reload. 🙃

Start by reproducing the layout at the 404 page, https://blog.elementary.io/404, in the reported browser and inspect the footer and page layout styles in the template. Done means the footer reaches the bottom of the viewport on short pages without causing the reported search icon or reload-position regressions.

Written by the indexing model from the issue text.