Sticky Footers In HTML CSS (Very Simple Examples)

Last Updated: October 19, 2023

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

Here is the download link to the example code, so you don’t have to copy-paste everything.

 

EXAMPLE CODE DOWNLOAD

Source code on GitHub Gist

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

START
END
FOOT
NAV

 

1B) THE HTML

1-sticky.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

1-sticky.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

START
END
FOOT

 

2B) THE HTML

2-fixed.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

2-fixed.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.

  1. The difference with position: fixed is that the footer will not “dock” and stay fixed at the bottom of the window.
  2. The problem with fixed position is that the footer will cover contents at the bottom. Which is why we use padding-bottom to “offset” the contents, so they don’t get covered.

 

 

METHOD 3) STICKY FOOTER WITH GRID LAYOUT

3A) THE DEMO

START
END
FOOT

 

3B) THE HTML

3-grid.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

3-grid.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 auto Divide 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

START
END
Page Footer

 

4B) THE HTML

4-calc.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

4-calc.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;
}
  1. width: 100vw; height: 100vh Same old set <body> to fill the window again.
  2. #page-foot { height: 50px; } Give the footer a fixed height.
  3. #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

All the required CSS features are well-supported on all modern browsers.

 

LINKS & REFERENCES

 

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!