Footer Always on Bottom with flex box

#style #css #design #layout

Simple way to have the footer always stick to the bottom and have the <main> content take up the rest of the room. No more floating <footer>

html, body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
}

main {   
    flex: 1 0 auto; 
}

footer {
    flex-shrink: 0;    
}

If you're using a background image or gradient

body {
	background: #020024;
	background: linear-gradient(
		5deg,
		rgb(17, 17, 17) 0%,
		rgb(40, 40, 40) 91%,
		rgb(50, 68, 71) 100%
	);
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: cover;

sadly this sets the image in a static place, it will not scroll with the page.

Credit