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