How would you use display: flex to make a footer stick to the bottom?

Difficulty: 3/10

Flexbox, CSS Layouts, Viewport Units

Sticky Footer Using CSS Flexbox

You can use Flexbox on the root container to make a footer stick to the bottom of the page. The key is to make the page container a column flex container and allow the main content to grow and take available space.

Example: Sticky Footer Using Flex

Here, the body is a column flex container. The .main-content area expands to fill the remaining space using flex: 1, pushing the .footer to the bottom even if the content is short.

Best Practices

1
Use flex-direction: column on the parent container to align content vertically.
2
Apply flex: 1 to the main content area so it grows and pushes the footer down.
3
Ensure html and body have height: 100% to allow the container to occupy full viewport height.

Scenario Questions

0-2 years experience

Follow-up Questions