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

ManuelFte commented 4 years ago

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. 🙃

cassidyjames commented 4 years ago

Yeah, I noticed this which is why the background below the footer matches/blends with it. It's relatively rare on a blog to get such a short page, and I didn't want to start doing anything hacky for such an edge case.

That said, I'm open to suggestions. I think theoretically we could use flexbox with the header, content, and footer to push the footer down? 🧙‍♂️ @btkostner

btkostner commented 4 years ago

@cassidyjames I always do flexbox on the container component (body or nested depending). I did that on the builds site. https://github.com/elementary/builds/blob/master/layouts/default.vue#L47. You just flex the container and flex-direction: column then the content area can flex: 1 0 auto and everything after the content area will always be pushed down.

https://builds.elementary.io/404

elementary / blog-template