CodeZettaInterview Hub

CSS · Flexbox · Mid-Level · Live Coding

How do you build a sticky footer with flex?

Short Interview Answer

Column flex on min-height 100%; main { flex: 1 } pushes footer down.

Detailed Explanation

Also achievable with grid. Avoid body margin collapse issues.

Example

body { min-height: 100%; display: flex; flex-direction: column; }
main { flex: 1; }

Did you know this answer?