Push Footer to bottom of viewport

[ben]

We start with a page with the usuals, a Navbar, a Main section and a Footer. As you can see, the Footer clings to the bottom of the Main section.

To push the Footer to the bottom of the page when there is not enough content in the Main section:

1. In the Structure panel, select the App node.

2. In the Properties panel, select Convert To: Flex Container

3. In the Structure panel, select Main.

4. In the Properties panel, under Flex Item, select Grow.

This has the effect of pushing the Footer to the bottom of the page.

5. Save the page and you are done.

For a video on the subject, see:

Sticky Footer