CSS trick, footer always at the bottom of the screen

We all came up with this problem once in our early development careers. How to make the footer stay at the bottom of the screen but without overlapping content.
There was always a compromise. Leave the footer at the end of the content (that won’t be to the bottom of the screen if the content is too large) or use javascript to position it fixed at the bottom until the content is large enough.

However, there is a more clever trick using only CSS.

The only code you need to write is:

where .parent-container is wrapper container of the footer.

The core component here is that the footer is sticky. That means it will never overlap the content, while top: 100vh ensures it is always at the bottom of the screen.

I hope this little trick helps with your development.