Sticky footer - Programming Notes

Skip to content

Programming Notes

Sticky footer

jAniceto/programming-notes

Get the footer to stick to the bottom of the window even when there is not enough content to fill the page.

HTML:

<body>
  <header>…</header>
  <main>…</main>
  <footer>…</footer>
</body>

CSS:

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

main {
  flex: 1;
}

References

https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

Other: - https://css-tricks.com/couple-takes-sticky-footer/ - https://getbootstrap.com/docs/4.0/examples/sticky-footer/