In CSS, how do you build a sticky footer with Flexbox — one that sits at the bottom of the viewport when the page is short, but is pushed below the content when the page is long?

## The problem being solved "Sticky footer" is an unfortunate name: it has nothing to do with `position: sticky`. The requirement is that a footer should never float in the middle of a mostly-empty screen — on a page with little content it should sit at the bottom edge of the viewport — while on a content-heavy page it must simply follow the content and be reachable by scrolling. A fixed footer fails the second half, because it permanently covers part of the page. ## The flex recipe ```css body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; } main { flex: 1; } ``` Three ideas are doing the work. **The column direction.** With `flex-direction: column` the main axis runs vertically, so `flex-grow` distributes *vertical* free space. Header, main and footer become flex items stacked top to bottom. **`min-height: 100vh`.** This is the source of the free space. It says the wrapper is at least as tall as the viewport, but may be taller. Using `height: 100vh` instead is the classic bug: it caps the box at exactly one viewport, so long content overflows the wrapper and the footer ends up painted over the middle of the page. **`flex: 1` on main.** The shorthand expands to `flex-grow: 1; flex-shrink: 1; flex-basis: 0%`. Since `main` is the only item with a non-zero `flex-grow`, it receives all the leftover space, pushing the footer to the bottom. On a long page there is no leftover space, growth contributes nothing, and everything falls back to natural flow. A reasonable variant is `flex: 1 0 auto` on `main`, which starts sizing from the content instead of from zero. In practice both work here, because a flex item's automatic minimum size prevents `flex-basis: 0` from squashing tall content. ## The auto-margin variant ```css footer { margin-top: auto; } ``` Instead of asking `main` to grow, you ask the footer's top margin to absorb the free space. Auto margins in flex soak up whatever main-axis space is available, so the footer is shoved to the far end. This is handy when several children could plausibly grow, or when you don't want `main` to stretch its own background across the empty space — a real visual difference: with `flex: 1` the main region's background paints across the empty area, with `margin-top: auto` it does not. ## Where to put the wrapper Applying the flex container to `body` works and avoids an extra element, but only if nothing resets `body`'s display and if you remember `margin: 0`. In an app that mounts into a root node (a `#root` or `#__next` style container), the height chain must be unbroken: an intermediate `div` between `body` and your layout that has neither the flex container nor a height will collapse it. The pragmatic fix is to put `min-height: 100vh` and the column flex on the outermost element your framework actually renders, rather than on `body`. ## Viewport-unit nuance On mobile browsers `100vh` resolves against the *large* viewport — the height with browser UI collapsed — so a footer positioned with it can sit below the visible area until the user scrolls. `100dvh` (dynamic viewport height) tracks the currently visible height as the URL bar shows and hides; it has been supported across the major browsers since 2022. A common approach is `min-height: 100vh` followed by `min-height: 100dvh`, so browsers that understand the newer unit use it. ## Alternatives worth naming CSS Grid expresses the same layout declaratively with `grid-template-rows: auto 1fr auto` on a wrapper of the same `min-height: 100vh` — the `1fr` row takes the leftover space exactly as `flex: 1` does. Which you pick is mostly taste for a three-row stack; grid reads slightly better because the intent lives in one declaration on the parent instead of being split between parent and child. The pre-flex techniques — negative margins on a footer of known height, or the `display: table` sandwich — required you to hard-code the footer height, and they break the moment the footer wraps to two lines. Mentioning why they were fragile is a good way to show you understand what flex actually bought here. ## What to check when it misbehaves If the footer floats mid-page, the wrapper has no height. If the footer overlaps content on long pages, someone wrote `height` where `min-height` belongs. If nothing moves at all, the growing element is probably not a direct child of the flex container — `flex-grow` only applies to direct children, so a wrapper `div` between the container and `main` swallows the effect.