-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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.
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
Align footer to the bottom of the page when the page has no/little content #45117
Comments
Thanks for opening up a separate issue for this! Depending on how it's implemented, I wonder if a minimum height option for the post content block would help? So, rather than controlling this via the position of the footer, the post content block could be set to take up at least the required amount of space? |
I've just added the Layout label, too, as I believe this is quite related to many of the other tasks surrounding block and page layouts 🙂 |
Maybe something similar to "Toggle Full Height" in the Cover block could work!
Thank you! |
I've put up a new PR that looks at adding in a minHeight block support in #45300 (it mostly borrows from some earlier experiments). |
Now that both #45300 and #45364 have been merged, it should be possible to:
@beafialho can you check if this solves the problem? |
@tellthemachines I tried testing this, without success, but from the discussion in #45364, it seems like it solves the problem. |
@beafialho thanks for testing! Was there anything specific you came across that didn't work? The whole flow is not super intuitive 😅 but if anything's actually broken we should look into it before the next release. |
@tellthemachines given my lack of knowledge to test, I just tried to use |
Oh, sorry @beafialho, I should have been clearer! These changes were merged a while ago so you can test them in the Gutenberg plugin. |
I tried the follow the instructions by @tellthemachines of Jan3, but failed. When I wrap the template (Header, Group, and Footer) in a stack, I'm able to set the min-height and fill, as described. Unfortunately, the stack constrains everything to content width and there's no control to turn that off. I can convert the stack to a group and fix the width, but then the fill no longer works. It seems that the stack needs the "inner blocks use content width" toggle for this to work, at least for how my theme is configured. |
Thanks for testing @brentlogan! The Stack block shouldn't apply content width to its children. I can't reproduce that exact issue locally on the latest trunk, but I'm seeing some weirdness around the Header width when testing with the TT3 Home template: |
Cool, at least it's not just me. Thanks for confirming @tellthemachines. Btw, I tested using a Front template in TT3 and got weirdness for both the header and footer widths |
The issue seems to be caused by the |
With #47134 merged, it's now possible to make Stack block children stretch to the full width of their parent, so the issue reported by @brentlogan should be fixed. Are we good to close this issue now? |
Between the additional flex controls that were added in #47134, sizing controls on layout flex children in #45364, and the minimum height block support in #45300, I agree, I think we can close out this issue now, as there are a few different ways that users or themes can put together a template where the footer area sits toward the bottom of the screen / the post content area takes up a minimum part of the screen. I'll close this out now — if there are follow-ups required for the above features, let's open up separate issues for investigating those follow-ups. |
With Gutenberg 15.1.0 I was able to confirm that the issue I'd reported above is now resolved. I wanted to close the loop. Thanks, everyone that made this possible! |
Whenever I add a footer and a page has no content or little content, what happens is that the footer stands in the middle of the screen, which looks awkward and buggy.
It would be nice if there was a way to align the footer template part to the bottom of the page when there's little content. In case this looks similar to #30121, I do not mean to have the footer fixed on scroll (which would also be great for other type of designs).
footer.mp4
The text was updated successfully, but these errors were encountered: