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;
}

<body>
<main>
Here is the main content.
</main>
<footer>
Here is the footer content.
</footer>
</body>

See the CodePen.

Comments