HTML CSS
(real quick examples)
<header id="head">My Site</header> <main id="main">Contents</main> <nav id="nav">Bottom Nav</nav> <footer id="foot">Footer</footer>
FIX AT BOTTOM #foot { position: fixed; bottom: 0; z-index: 9; width: 100%; height: 40px; }
PREVENT CONTENT FROM BEING COVERED #main { padding-bottom: 40px }
#nav { position: sticky; bottom: 0; z-index: 9; }
FLEX COLUMN LAYOUT body { display: flex; flex-direction: column; min-height: 100vh; }
ALLOW CONTENT AREA TO FILL HEIGHT #main { flex-grow: 1; }
body { display: grid; min-height: 100vh; grid-template-rows: auto 1fr auto; }