The parent element of the footer, `.wrapper` , and its respective parent elements must all have a `min-height` equal to the viewport height. This is most easily set with the `100vh` value, including a fallback of `100%` for browsers that don't support viewport units.

The `.wrapper` element is set to `display: flex` with `flex-direction: column` .

The element above the footer, `.main` , is set to `flex-grow: 1` to "push" the footer to the bottom of the viewport, when its own content does not fill the screen.