Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
ManuelFte opened this issue Sep 22, 2020 · 2 comments
Open

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

ManuelFte opened this issue Sep 22, 2020 · 2 comments

Comments

@ManuelFte
Copy link

ManuelFte commented Sep 22, 2020 •
edited

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

Screenshots or screen recordings

image

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
Copy link
Contributor

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
Copy link
Contributor

btkostner commented Sep 22, 2020 •
edited

@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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@cassidyjames @btkostner @ManuelFte