Unobtrusive and smart Sticky Footer

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;
Here is the main content.
Here is the footer content.

See the CodePen.