You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
[ 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. 🙃
The text was updated successfully, but these errors were encountered:
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
@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.
Prerequisites
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:
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: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 andposition: 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. 🙃
The text was updated successfully, but these errors were encountered: