Align footer to the bottom of the page when the page has no/little content

[beafialho]

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

[andrewserong]

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?

[andrewserong]

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 🙂

[beafialho]

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?

Maybe something similar to "Toggle Full Height" in the Cover block could work!

I've just added the Layout label, too

Thank you!

[andrewserong]

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

[tellthemachines]

Now that both #45300 and #45364 have been merged, it should be possible to:

1. Wrap the whole template in a Stack block;
2. Set a min-height of, say, 90vh on the Stack block;
3. Assuming the blocks inside the Stack to be Header, Group content wrapper, and Footer: add a height of "fill" to the Group content wrapper (can be found under Dimensions in the block sidebar).

@beafialho can you check if this solves the problem?

[beafialho]

@tellthemachines I tried testing this, without success, but from the discussion in #45364, it seems like it solves the problem.

[tellthemachines]

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

[beafialho]

@tellthemachines given my lack of knowledge to test, I just tried to use http://gutenberg.run/45364 but that didn't work 😕

[tellthemachines]

Oh, sorry @beafialho, I should have been clearer! These changes were merged a while ago so you can test them in the Gutenberg plugin.