Establish a fixed footer using flexbox

Prior to initiating: Explore our guide to flexbox and append a footer to your website.

You have the ability to utilize flexbox to affix a footer to the bottom of each webpage on your site — irrespective of the quantity of content present above it.

The styles applied to the Body (All pages) tag flow down to every page within the site. To expediently arrange and align your design, configure the Body (All pages) tag to flex and have its flex children stack vertically within:

1. Choose the Body element on the canvas or within the Navigator
2. Navigate to the Style panel > Selector field
3. Select Body (All pages) from the Selectorfield dropdown
4. Proceed to the Style panel > Layout > Display
5. Press Flex
6. Tap on the vertical “down arrow” icon to configure the flex direction to vertical

By setting the Body — the encompassing element of all content on the page — to Flex, adjusting the top margin on the footer to auto becomes possible. This action propels the footer away from the content above and ensures it sticks to the page’s bottom.

To establish the footer’s top margin:

1. Select the footer on the canvas or within the Navigator
2. Head to the Style panel > Spacing
3. Assign the top margin as auto

For pages lacking sufficient content to drive the footer entirely to the bottom, the top margin introduces white space to secure the footer at the bottom. Conversely, on content-heavy pages, the footer recognizes the other content on the page, preventing its top margin from generating extra white space above it.

Valuable tip: You can transform the footer into a component for reusability throughout your site, ensuring that any modifications applied to the footer impact all instances of the footer across your site. Delve into more details regarding components.