I can't seem to get my sticky footer working. It's my understanding after some research that the parent element of the footer needs to be set to position: relative. Then the footer should be set to position: absolute with bottom: 0. I've done that and it looks fine fullscreen. But when the browser is resized to be smaller, the footer sits in the middle of the page. Any advice? I've been searching for about an hour with no luck. Thanks!
Edit: To clarify, I'd like for the footer to only be visible once you scroll to the bottom of the page or if the whole page is in view. Not persistent on the page at all times (position: fixed.)
(Please see the codepen link below)
You need to set a min-height: 100%; to the overarching div/body. You will also need to add padding to the div closing just before the footer ie .content-area so that the footer doesn't cover up your content when the screen height is smaller.