Push Footer to the Bottom

If the main html element has very little content, you might see that the footer isn't at the bottom. Luckily, there's a simple way to move the footer down without needing to add more stuff or make a bunch of CSS styles.

Let's say our body element contains header, main, and footer. The easiest solution is to use CSS grid like this:

// most elegant and easiest fix
body {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
}

CSS grid is the most elegant method to achieve this, even though there are various techniques available. It's well-supported across most browsers.