HTML CSS

STICKY FOOTERS WITH HTML CSS

<header id="head">My Site</header> <main id="main">Contents</main> <nav id="nav">Bottom Nav</nav> <footer id="foot">Footer</footer>

THE HTML

01

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

FIXED HEADER

02

PREVENT CONTENT FROM BEING COVERED  #main { padding-bottom: 40px }

#nav {   position: sticky; bottom: 0; z-index: 9; }

STICKY HEADER

03

FLEX COLUMN LAYOUT body {   display: flex; flex-direction: column;   min-height: 100vh; }

FLEX BOTTOM FOOTER

04

ALLOW CONTENT AREA TO FILL HEIGHT #main { flex-grow: 1; }

body {   display: grid; min-height: 100vh;   grid-template-rows: auto 1fr auto; }

GRID BOTTOM FOOTER

05