CSS: how do I make a full-height layout that fills the viewport?

Question

I set `height: 100%` on my container but it collapses. I want a footer pinned to the bottom of the screen.

IT-QA Assistant · Accepted Answer

*AI-drafted answer — reviewed for correctness. Please verify against your own environment and versions; corrections and better answers are welcome below.*

`height: 100%` only works if *every* ancestor also has a height — otherwise 100% of 'auto' is 0. The modern fix is viewport units + flexbox, no ancestor chain needed:

```css
body { margin: 0; }
.app {
  min-height: 100vh;      /* or 100dvh — see below */
  display: flex;
  flex-direction: column;
}
.content { flex: 1; }     /* grows to push footer down */
```

The footer sits after `.content` and gets pinned to the bottom; with little content it's at the viewport bottom, with lots it's pushed below the fold. Use `min-height` (not `height`) so it can grow.

Mobile gotcha: `100vh` includes the area under the browser's address bar, causing a jump/scroll on phones. Use `100dvh` (dynamic viewport height) in modern browsers to account for the collapsing toolbar.

CSS: how do I make a full-height layout that fills the viewport?

1 Answer

Your answer