Sticky footer with CSS flexbox

  1. Home
  2. Blog
  3. Front-end
  4. Sticky footer with CSS flexbox

Simple html code for example:

<body>
    <header class="header">
      Site header
    </header>
    <div class="main-area">
      Main content of page
    </div>
    <footer class="footer">
      Site footer
    </footer>
</body>

CSS code which will do all the magic:

body{
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}
.main-area {
    flex: 1 0 auto;
}
Wave