Keep the footer always at the bottom

keep-the-footer-always-at-the-bottom.html

// HTML

<div>
	<header>I'm a header</header>
	<main>I'm a main</main>
	<footer>I'm a footer</footer>
</div>

styles.css

// CSS

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

header {
	height: 60px;
}

main {
	display: flex;
	flex: 1;
}

footer {
	height: 60px;
	align-self: flex-end;
}