# Sticky Footers

## Main Element

Set your footer element to `position: sticky;` and `top: 100%` .

The element that contains the footer (and the rest of your layout elements) needs to have a `min-height: 100vh;`

Stick-ily positioned elements can't be positioned outside of their parent elements. The `top: 100%` tries to push the footer outside the brower window and the footer's parent element prevents that from happening. Setting the parent's `min-height` to `100vh` allow's the footer to sit at the bottom of the browser until content pushes it off the screen.