web-tip.top
WTT

Sticky footer with CSS flexbox

12.07.2024

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