Welcome to a tutorial on how to create sticky footers in HTML and CSS. So you want to fix a navigation bar banner at the bottom of the page?
An easy way to create a sticky footer is to set sticky position – <footer style="position:sticky; bottom:0; left:0; z-index:9;">FOOT</footer>.
That covers the quick basics, but read on for more methods and examples!
TABLE OF CONTENTS
Download & Notes
Sticky Footer
Extras
The End
DOWNLOAD & NOTES
Here is the download link to the example code, so you don’t have to copy-paste everything.
EXAMPLE CODE DOWNLOAD
Just click on “download zip” or do a git clone. I have released it under the MIT license, so feel free to build on top of it or use it in your own project.
SORRY FOR THE ADS...
But someone has to pay the bills, and sponsors are paying for it. I insist on not turning Code Boxx into a "paid scripts" business, and I don't "block people with Adblock". Every little bit of support helps.
Buy Me A Coffee Code Boxx eBooks
METHOD 1) STICKY FOOTER
1A) THE DEMO
1B) THE HTML
<!-- (A) DUMMY CONTENTS -->
<main id="page-body">
<p>START</p>
<p style="height:3000px"></p>
<p>END</p>
</main>
<!-- (B) FOOTER -->
<footer id="page-foot">FOOT</footer>
<nav id="page-nav">NAV</nav>This page should be self-explanatory – Contents, footer, and bottom navigation bar.
1C) THE CSS
/* (A) STICKY FOOTER */
#page-foot {
position: sticky;
bottom: 0; left: 0; z-index: 9;
}As in the introduction, position: sticky is the easiest way to create a sticky footer. Take note of the behavior though – The footer stays fixed at the bottom, but “docks” as you scroll down to the bottom.
METHOD 2) FIXED FOOTER
2A) THE DEMO
2B) THE HTML
<!-- (A) DUMMY CONTENTS -->
<main id="page-body">
<p>START</p>
<p style="height:3000px"></p>
<p>END</p>
</main>
<!-- (B) FOOTER -->
<footer id="page-foot">FOOT</footer>This is pretty much the same layout as the previous example, but there is no bottom navbar.
2C) THE CSS
/* (A) FIXED FOOTER */
#page-foot {
position: fixed; width: 100%;
bottom: 0; left: 0; z-index: 9;
}
/* (B) PREVENT BOTTOM CONTENT FROM BEING COVERED */
#page-body { padding-bottom: 50px !important; }This is an old-school method before we even have the sticky position.
- The difference with
position: fixedis that the footer will not “dock” and stay fixed at the bottom of the window. - The problem with fixed position is that the footer will cover contents at the bottom. Which is why we use
padding-bottomto “offset” the contents, so they don’t get covered.
METHOD 3) STICKY FOOTER WITH GRID LAYOUT
3A) THE DEMO
3B) THE HTML
<!-- (A) DUMMY CONTENTS -->
<main id="page-body">
<p>START</p>
<p style="height:3000px"></p>
<p>END</p>
</main>
<!-- (B) FOOTER -->
<footer id="page-foot">FOOT</footer>Look no further this is the same as the previous example.
3C) THE CSS
/* (A) GRID LAYOUT */
body {
width: 100vw; height: 100vh;
display: grid;
grid-template-rows: 1fr auto;
}
/* (B) ALLOW OVERFLOW */
#page-body { overflow: auto; }How this works:
body { width: 100vw; height: 100vh; }We set the<body>to fill the entire window.grid-template-rows: 1fr autoDivide the<body>into a “grid” of 2 rows, content on top and footer below. The height of the footer is set to “auto”, while the content will scale itself to fill the remaining height.#page-body { overflow: auto; }Set the scrollbar on the content area. Not on the page.
METHOD 4) STICKY FOOTER WITH CALC
4A) THE DEMO
4B) THE HTML
<!-- (A) DUMMY CONTENTS -->
<main id="page-body">
<p>START</p>
<p style="height:3000px"></p>
<p>END</p>
</main>
<!-- (B) FOOTER -->
<footer id="page-foot">FOOT</footer>Yes, the layout is still the same for this final example…
4C) THE CSS
/* (A) FULL PAGE BODY */
body { width: 100vw; height: 100vh; }
/* (B) FOOTER */
#page-foot { height: 50px; }
/* (C) BODY */
#page-body {
height: calc(100vh - 50px);
overflow: auto;
}width: 100vw; height: 100vhSame old set<body>to fill the window again.#page-foot { height: 50px; }Give the footer a fixed height.#page-body { height: calc(100vh - 50px); overflow: auto; }The page body will fill the remaining height, and draw a scrollbar if necessary.
Long story short, this is kind of the “manual way” to create the grid footer above.
EXTRAS
That’s all for the tutorial, and here is a small section on some extras and links that may be useful to you.
COMPATIBILITY CHECKS
- CSS Calc – CanIUse
- CSS Grid – CanIUse
- CSS Sticky – CanIUse
All the required CSS features are well-supported on all modern browsers.
LINKS & REFERENCES
- Sticky Headers – Code Boxx
- Freeze Table Rows & Columns – Code Boxx
THE END
Thank you for reading, and we have come to the end. I hope that it has helped you to better understand, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!
