HTML CSS

KEEP HTML FOOTERS AT THE BOTTOM

<header id="pageHead">Head</header> <main id="pageMain">Content</main> <footer id="pageFoot">Foot</footer>

HTML - HEAD MAIN FOOT

00

FIX FOOTER AT BOTTOM #pageFoot {   position: fixed;   bottom: 0; left: 0; z-index: 9;   width: 100%; height: 40px; }

FIXED FOOTER

01

TO PREVENT BOTTOM CONTENT COVERED BY FOOTER #pageMain { padding-bottom: 50px; }

FULL HEIGHT FLEX BODY body {   padding: 0; margin: 0;   min-height: 100vh;   display: flex;   flex-direction: column;  }

FLEX FOOTER

02

ALLOW MAIN TO FILL HEIGHT #pageMain { flex-grow: 1; }

FULL HEIGHT GRID BODY body {   padding: 0; margin: 0;   min-height: 100vh;   display: grid;   grid-template-rows: auto 1fr auto;  }

GRID FOOTER

03