beautiful-jekyll
beautiful-jekyll copied to clipboard
daattali
Footer stick to the bottom when contents are short or absent
I know this has been asked already, but it really feels like an issue on large screens or when the content is just a few lines.
The footer does not stay at the bottom of the page but immediately below the content, and the rest of the page shows the background.
If it may be of any help I'm willing to open a PR or try to fix it on my own. I've tried several solutions but with no success. I'll keep trying though, I wonder if you have any suggestions on how to approach the problem.
I don't want to modify the current behavior of the footer, but just make it at the bottom of the page for those that don't have many lines. I've checked solutions like this but they are not valid options.
This is indeed something that's been requested previously, and is a very old and common HTML problem. If you do find a good clean simple solution that doesn't cause any issues I would be very happy for a pull request!
https://github.com/daattali/beautiful-jekyll/pull/577 had a potential fix to this. Should look into it again when there is some time
Sorry to bump this 9 month old issue, but has there been any progress on it? I was just updating my website and came across this issue.
There has not been any important updates on this. If anyone wants to try to fix it I'd be happy to incorporate a PR. There was previously a PR but it was old and did not work, and the person who wrote it did not respond to try to fix it so I closed it.
Yo @daattali quick question, would this be able to solve the footer issue?
https://rdyar.github.io/strapless/sticky-footer/
Perhaps if everything else about the current html layout and css was changed. A quick test showed that doing "display: flex" on the body tag of current implementation completely messes up the page. I honestly just don't think there is a good general all-purpose solution to this that just works.
"display: flex" on the body tag
Hmm if that is all you did then it won’t work. You need a container set to flex and then the content gets flex:1 to expand and take up any extra room.
What I have in the link and the little explanation of how it works does work, I do that on every site I have.
I think you might also have to do height: 100vh on the body?
That's not all I did. Have you tried it on this theme specifically? I can't see any beautifuljekyll sites under your github account so I can't verify. If you believe that this should work, feel free to showcase it here.
In case someone wants to check the solution I've adopted, the forked GitHub repository containing the changes is available here.
I ended up using it on my personal website for years, never gave me a problem. Works smoothly on both mobile and PC screens.
Tried on a bunch of different browsers, always good. Feel free to provide feedback or leave your two cents on the parts that may be flaky.
In case someone wants to check the solution I've adopted, the forked GitHub repository containing the changes is available here.
I ended up using it on my personal website for years, never gave me a problem. Works smoothly on both mobile and PC screens.
Tried on a bunch of different browsers, always good. Feel free to provide feedback or leave your two cents on the parts that may be flaky.
Yeah, it appears to work, I tested it on the latest version of BeautifulJekyll, and it seems to work as well. Not sure why the pull request was closed, hmm. Also, I seem to be having this weird white thing pop up when I'm shrinking the browser to a certain size, not sure how to fix it.
@catches The PR was closed because there was no response in it for 4 months:
Closing this PR due to inactivity. If anyone wants to revive it in the future, feel free to submit a new one!
@simoarpe thanks for chiming in, I'll test it in different scenarios and see if it holds up without affecting the existing UI
I just tried out the code in the old PR #577 and it didn't seem to work for me. It's very possible that it used to work years ago, but in 2020 I upgraded to bootstrap 4 and had to rewrite the entire framework, so that solution may have worked with the old version of beautifuljekyll but not anymore.
If anyone wants to tackle this issue, I would be very happy to accept a PR that shows a working solution (using today's version!)
Came here to submit an issue for the same thing.
I thought I had a potential fix, but it doesn't completely fix it so decided against submitting a PR.
https://github.com/daattali/beautiful-jekyll/compare/master...ReenigneArcher:reenignearcher.github.io:fix-pin-footer-position-to-bottom-of-page
It is probably possible to solve this with css or a newer version of bootstrap, but I am not an expert... The best option I can think of is to use javascript to get the height of each main element in the body, and compare the total height to the height of the browser. If it's less than the total height then set min-height of the element before the footer to the difference. And you'd need to watch for browser resizing.
I strongly oppose to using javsacript for this, I try to be very conservative with javascript usage. We'll wait until someone finds a clean CSS solution.
You'll have to change the layout. The nav-bar being position:absolute is not compatible with the footer sticking to bottom. If you divide the body into 2 components, footer and everything else, the CSS Grid solution is pretty trivial.
Should I submit a PR?
@ch0c0l8ra1n is the resulting behaviour and UI the same except for the footer? If there's no differences to the rest of the page, please do open a PR. If you have a site that has this implemented, please share a link so I can test it
@daattali Yes the resulting behaviour and the UI is the same except the footer. You can check it out at My github page and the about me section (short content.)
I have submitted a pull request.