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.

---

Add more content!