CSS · Exercise 6 of 6 Previous
Advanced
A page with a sticky footer
This page has very little content, so the footer floats up under it. Make the footer sit at the very bottom of the window when the content is short.
Use Flexbox: <main> should take up the spare height. Don't use position on the footer. The page must still grow normally when content is long, so don't fix its height.
What Check tests
- The body is a column flex container
- The footer touches the bottom of the window
- Main fills the spare height
- The footer isn't positioned
- The page can still grow (no fixed height)
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Runs in your browser. Your code is saved here.
Your page
Press Run to see the page.
Console
Nothing logged yet.