Footer leaves bottom of the page and floats when there's not enough content to push it down #38
Description
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:
- 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
- Look at the footer.
Expected behavior
The footer should stay fixed to the bottom of the <body>.
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 <html> and <body> tags are not filling the height of the page, so I added this to my local copy of the theme:
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 <body>, 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. 🙃