Build a sticky footer using flexbox

Use flexbox and top margin to make a footer stick to the bottom of each page on your site.

We’re transitioning to a new UI, and are in the process of updating our Webflow University content.
Before you get started: Check out our intro to flexbox and add a footer to your site.

You can use flexbox to make a footer stick to the bottom of each page on your site — no matter how much or how little content is above it.

Styles set on the Body (All pages) tag cascade down to every page on the site. To quickly lay out and align your design, you can set the Body (All pages) tag to flex and make its flex children stack vertically inside:

  1. Select the Body element on the canvas or in the Navigator
  2. Go to Style panel > Selector field
  3. Choose Body (All pages) from the Selector field dropdown
  4. Go to Style panel > Layout > Display
  5. Click Flex
  6. Click the vertical “down arrow” icon to set the flex direction to vertical

Because you set the Body — the parent element of everything on the page — to Flex, you can set the top margin on the footer to auto. This makes the footer push away from the content above and stick to the bottom of the page.

To set the footer’s top margin:

  1. Select the footer on the canvas or in the Navigator
  2. Go to Style panel > Spacing
  3. Set the top margin to auto

On pages without enough content to push the footer all the way to the bottom, the top margin creates whitespace to keep the footer stuck to the bottom. Conversely, on pages with a lot of content, the footer respects the other content on the page and its top margin won’t create any additional whitespace above it.

Pro tip: You can make the footer a component to reuse it across your site and ensure that any changes you make to the footer affect all instances of the footer on your site. Learn more about components.

Table of contents

Continue learning

Hmm…we couldn’t find any results for “search query”. Try a different search term or check out our community forum.

Search the forumReset the filter
Load more

Filter

Reset
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Topics
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Back to top