HTML CSS
(real quick examples)
<header id="pageHead">Head</header> <main id="pageMain">Content</main> <footer id="pageFoot">Foot</footer>
FIX FOOTER AT BOTTOM #pageFoot { position: fixed; bottom: 0; left: 0; z-index: 9; width: 100%; height: 40px; }
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; }
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; }