HTML CSS

KEEP HTML FOOTERS AT THE BOTTOM

(real quick examples)

<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