DEV Community

Akshay Rajput
Akshay Rajput

Posted on • Updated on

Keep footer at bottom of page - using flexbox

TLDR - at the end. But I urge you to read ahead if you'd like to understand the concept.

Have you run into this problem where the footer on your site does not stay at the bottom of the page, even if it is the last tag in your html body.

Especially if you are new to web development, you'll run into this problem. There are ways of making sure your footer stays at bottom, but most of those methods have some kind of caveat.

  • Position: absolute (doesn't work when there's more content, you'll realise footer is stuck and your content is scrolling behind it).
  • Position: fixed (use only if you want your footer to be always visible).

Preview footer problem


There's a way using flexbox which works on device of every size, doesn't require fixed height of navbar or footer, and works without any side-effects.

Reset browser defaults

If you are not using any css frameworks, you should reset some browser default css. Otherwise your browser will apply its own margin and padding to page.

  /* following style will be applied to every element */
  *, *::before, *::after{
     margin: 0;
     padding: 0;
     box-sizing: border-box; 
  }
  /* write your own css after this part */
Enter fullscreen mode Exit fullscreen mode

Structure of page

Your html body should follow this kind of structure. You can use <div> instead of <main>.

<body>
  <div class="pagewrap">
    <nav>...</nav>
    <main>...</main>
    <footer>...<footer>
  </div>
</body>
Enter fullscreen mode Exit fullscreen mode

basically wrap all content of your page inside a div, give it some classname

Using flexbox

Add display:flex and flex-direction:column to you main div (which contains all other elements of page). You also need to make that div take full height of viewport. see below code:

  .pagewrap{
    display: flex;

    /*vertically stack children*/
    flex-direction: column;

    /* expand to take full height of page */
    /* min-height overrides both height & max-height */
    min-height: 100vh; 

  } 
Enter fullscreen mode Exit fullscreen mode

Concept of flexbox column


Now all you need to do is stretch the element to take as much height as possible. Use flex-grow to do this.

  main{
    flex-grow: 1;
  }
Enter fullscreen mode Exit fullscreen mode

Final output


TLDR :

  • Wrap all of your body elements inside a div.
  • Give that div a display: flex, flex-direction: column and min-height: 100vh;
  • Wrap elements other than navbar and footer inside a div/main tag.
  • Give that div/main tag a flex-grow: 1;

That's it! As you can see in above picture, it works even if you have less content or more content. You don't have to worry about making it responsive.

Discussion (10)

Collapse
omkarborude profile image
Omkar Borude

Amazing write-up !!

Collapse
nshanbhag20001412 profile image
Neha Shanbhag

Ahh, finally a good solution!!. Informative!!

Collapse
belidenikhil profile image
NikhilBelide

Great explanation man
On point and works like a charm 🔥

Collapse
ymmijrameka profile image
YmmijRameka

BEAUTIFUL explanation!!! tysm :D

Collapse
purohitdheeraj profile image
Dheeraj Purohit

great info 👍

Collapse
hassansuhaib profile image
Hassan Suhaib

This is the best solution. I really hate the one wit fixed size of the footer and then adding the padding for that size. Thanks!

Collapse
zabihhaqqani profile image
Zabih

fixed my footer thanks man!

Collapse
refayathaque profile image
Refayat Haque

I've been struggling with this for YEARS. Never successfully having figured it out, until now. Thank you so much Akshay!

Collapse
abdallahabis profile image
Abdallah Abis

The direct child/children of main will never get 100% of main's height, unless it holds content that is >= main's height.

Collapse
fayaz369 profile image
Mohammed Fayaz

Amazingly explained!