Sticky footer not overlapping content

Good morning,

On the page I’m creating, there’s a red block in the body of the page, and a green footer. I would like the green footer to always stick to the bottom of the page (that’s why I’ve made it sticky with 0 px to the bottom of the page). The problem I encounter is, on smaller displays, when the viewport is “too small”, the green footer overlaps the red block. I would like to green footer to never overlap the red block. In that situation where the display is “too small” I would like to page height to simply get bigger to one sees: the red block entirely visible not overlapped, and further below the green footer sticking to the very bottom of the page, if that makes any sense :wink:

Here’s my unsuccessful attempt in “read only”

Here’s the link to my unsuccessful attempt in a page:

Many thanks to anyone who could help me out :slight_smile: