It is as simple as
html,
body {
height: 100%;
}
body > footer {
position: sticky;
top: 100vh;
}Silvio Rosa made a CodePen about it, which Chris Coyier is referring to on CSS-Tricks.
I didn't test if it works in all desired scenarios, e.g. on mobile. My favorite solution for this kind of sticky footer, which is robust as far as I can tell, is:
html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
body > main {
flex-grow: 1;
flex-shrink: 0;
}
body > footer {
flex-shrink: 0;
}<body>
<main>Here is the main content.</main>
<footer>Here is the footer content.</footer>
</body>See the CodePen.