How to reveal the footer from under the content, using position sticky

Once upon a time, a challenge like this, where you want to reveal a footer when the end of the content is reached, would have needed position: fixed|absolute and a bit of JavaScript to calculate the dynamic height of the footer, for responsiveness.

Thankfully, we now have a much simpler solution, using sticky positioning. With position: sticky we don’t need to worry too much about the height of the footer, we can simply set a sensible minimum viewport size that we’re confident the footer will fit in and voila, a footer that reveals from underneath the content above it.

Code example to reveal a footer

@media (min-width: 1200px) and (min-height: 600px) {
    .any-preceding-siblings {
        z-index: 2;
    }
    
    footer {
        position: sticky;
        bottom: 0;
        z-index: 1;
    }
}

Sticky positioning, like many styling customisations, is easy when you know what can be achieved with CSS3 and CSS4. If you’re looking for help with custom styling or would like help designing your web pages, please reach out and we’ll gladly help.

Check out our other CSS tips: CSS

Reply