3 Easy Ways To Keep HTML Footers At The Bottom

Welcome to a quick tutorial on how to keep HTML footers at the bottom. Once upon a time in the Dark Ages of the Internet, we have to use all sorts of crazy negative margin, position, and CSS hacks to stick a footer at the bottom. But thankfully, we are long past that painful age.

The easy ways to keep a footer at the bottom with modern CSS are:

  1. Use footer { position: fixed } or footer { position: sticky } to keep the <footer> at the bottom.
  2. Use a flexbox layout that “stretches” the main section, keep the footer at the bottom.
    • <header>HEAD</header> <main>MAIN</main> <footer>FOOT</footer>
    • html, body { height: 100%; }
    • body { display: flex; flex-direction: column; }
    • main { flex-grow: 1; }
  3. Lastly, use a grid layout to achieve the same “stretch main section”.
    • <header>HEAD</header> <main>MAIN</main> <footer>FOOT</footer>
    • html, body { height: 100%; }
    • body { display: grid; grid-template-rows: auto 1fr auto; }

That covers the basics, but let us walk through some actual examples in this guide – Read on!

ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

REAL QUICK TUTORIAL

 

TABLE OF CONTENTS

Download & Notes Bottom Footer Useful Bits & Links
The End

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

QUICK NOTES

If you spot a bug, please feel free to comment below. I try to answer questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

 

WAYS TO STICK FOOTER AT BOTTOM

All right, let us now move into the various ways to stick a footer at the bottom.

 

1) FIXED POSITION

HTML & CSS

1-fixed.html
<style>
/* (A) FOOTER */
#page-footer {
  /* (A1) FIXED AT BOTTOM */
  position: fixed;
  bottom: 0;
  left: 0;
  /* (A2) DIMENSIONS */
  width: 100%;
  height: 40px;
  padding: 0 5px;
  /* (A3) CENTER TEXT */
  display: flex;
  align-items: center;
  justify-content: center;
}
 
/* (B) MAIN CONTENTS */
#page-main {
  padding-bottom: 50px; /* SAME OR MORE HEIGHT THAN FOOTER */
}
 
/* (C) NOT IMPORTANT - FOR DEMO */
html, body { padding: 0; margin: 0; }
#page-head {
  background: #ffd1d1;
  padding: 5px;
}
#page-main {
  background: #eaffd1;
  padding-top: 1000px; /* SIMULATE A LONG PAGE */
  padding-left: 5px;
  padding-right: 5px;
}
#page-footer { background: #d1f9ff; }
</style>
 
<header id="page-head">MY SITE</header>
<main id="page-main">Last Line.</main>
<footer id="page-footer">Copyright My Site</footer>

 

QUICK EXPLANATION

  • Basically, just set position: fixed and bottom: 0 on the footer – That will make it stick to the bottom.
  • The problem with this method is that the fixed footer will cover over contents at the bottom.
  • That is why we use #page-main { padding-bottom: N } to give some “allowance”, push the contents up so that they are not covered by the fixed footer.

 

 

2) FLEX LAYOUT

HTML & CSS

2-flex.html
<style>
/* (A) FULL HEIGHT DOCUMENT */
html, body {
  padding: 0;
  margin: 0;
  height: 100%;
}
 
 /* (B) FLEXIBLE BOX ON BODY */
body {
  display: flex;
  flex-direction: column;
}
 
/* (C) ALLOW MAIN CONTENT SECTION TO AUTO-FILL HEIGHT */
#page-main { flex-grow: 1; }
 
/* (D) NOT IMPORTANT - FOR DEMO */
#page-head, #page-main, #page-footer { padding: 5px; }
#page-head { background: #ffd1d1; }
#page-main { background: #eaffd1; }
#page-footer { background: #d1f9ff; }
</style>

<header id="page-head">MY SITE</header>
<main id="page-main">Main contents</main>
<footer id="page-footer">Copyright My Site</footer>

 

QUICK EXPLANATION

The flexible box, a modern-day convenience.

  • First, we set the entire document to cover the full height – html, body { heightL: 100% }.
  • The magic actually comes from the flexible box layout – body { display: flex; flex-direction: column }. This will set the header, contents, and footer in a vertical, single-column layout.
  • Setting #page-main { flex-grow: 1; } will allow the main contents to “stretch to fill height” – Effectively pushes the footer to the bottom.

 

 

3) GRID LAYOUT

HTML & CSS

3-grid.html
<style>
/* (A) FULL HEIGHT DOCUMENT */
html, body {
  padding: 0;
  margin: 0;
  height: 100%;
}
 
/* (B) GRID LAYOUT - AUTO-FILL HEIGHT FOR MAIN SECTION */
body {
  display: grid;
  grid-template-rows: auto 1fr auto;
}
 
/* (C) NOT IMPORTANT - FOR DEMO */
#page-head, #page-main, #page-foot { padding: 5px; }
#page-head { background: #ffd1d1; }
#page-main { background: #eaffd1; }
#page-foot { background: #d1f9ff; }
</style>

<header id="page-head">MY SITE</header>
<main id="page-main">Main contents</main>
<footer id="page-foot">Copyright My Site</footer>

 

QUICK EXPLANATION

The grid layout is yet another modern convenience, and this should be pretty straightforward too.

  • Again, we set the entire document to fill the entire height – html, body { height: 100% }.
  • Set the body to grid layout – body { display: grid }.
  • The magic comes from grid-template-rows: auto 1fr auto. In human terms:
    • Layout the page in 3 rows (header, contents, footer).
    • The header and footer will have auto height.
    • The main contents will have 1fr flexible height – This allows the contents to “stretch to fill height”, effectively pushing the footer to the bottom.

 

 

USEFUL BITS & LINKS

That’s all for this guide, and here is a small section on some extras and links that may be useful to you.

 

WHICH IS THE BEST METHOD?

Personally, I will go with the flex or grid layout. The reason why I avoid using a fixed bottom menu is, mobile screens are already small enough. A fixed bottom footer will occupy space, leaving less room for content – Especially on the portrait orientation.

 

INFOGRAPHIC CHEAT SHEET

How To Keep HTML Footer At Bottom (Click To Enlarge)

 

LINKS & REFERENCES

 

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment

Your email address will not be published. Required fields are marked *