DEV Community

How to make footer stick at the bottom of web page.

Nehal Ahmad on February 28, 2021

Problem If you are new to web development and have created some HTML page before then you may be in a situation where you find that your...

Read full post

Rudy Reeves • Feb 28 '21 • Edited

I think flex-grow: 1; on the main content (the <article>) would achieve a similar result without margin and also allow the main content to fill the empty space

Ludal 🚀 • Feb 28 '21

I often use this one, it seems more intuitive than having an automatic margin on the footer 🤔

Vaishali JS • Mar 1 '21

I also used flex-grow to achieve this effect. Knowing about margin technique is new for me.

naren67 • Feb 28 '21

grab that footer's class and do this
for example

.footer{
position:absolute;
bottom:0;
}

thats it

Benjamin Grand • Feb 28 '21

Nope, not the same.

With the example of this article, the footer is pushed to the bottom.

With your example, the footer is placed to the bottom, above all elements.

Eduardo Cookie Lifter • Feb 28 '21

The footer placed above all elements, isn't that what we're still looking for? I mean it's still at the bottom of the page, unless it's on top of another element then yes, that's not what we want

Dorival Pedroso • Feb 28 '21

I suppose the goal is to handle the cases: do we have more content that needs to push the footer down? is the screen big enough so the footer can stay at the bottom? I use grid for this reason. See the example from here css-tricks.com/the-holy-grail-layo... where you can see what happens to the footer when you expand Article.

naren67 • Mar 26 '21

.footer{
position:fixed;
bottom:0;
}
a quick update use position fixed instead of absolute

Chris Okwakol • May 21 '21

footer {
position:relative;
bottom:0;
}

this worked for me.

Chaitu Maverick • Mar 1 '21

This is the coolest one TBH. :)

Chris • Mar 1 '21

This could work, but I believe you would also need a margin-bottom the exact height of the footer element added to your page content, otherwise you run the risk of having the footer on top of things.

naren67 • Mar 2 '21

yes,I mean position fixed would work better instead of position absolute

Dumte Nwidoobee Joshua • Feb 28 '21

This is the one I'm familiar with

Nehal Ahmad • Feb 28 '21

Benjamin Grand is right.

Dorival Pedroso • Feb 28 '21

Good one!

I'd also suggest "display: grid".

For example:

    height: 100vh;
    display: grid;
    grid-template-areas:
      'warning'
      'header'
      'main'
      'footer';
    grid-template-columns: auto;
    grid-template-rows: auto auto 1fr auto;

Where you can also get sticky header and more.

See Gist here: gist.github.com/cpmech/241857a5fe7...

Cheers.

Manel • Nov 20 '22

I'm working with react and what worked for me is:

#root {
  min-height: 100vh;
  position: relative;
}

footer {
  position: absolute;
  bottom: 0;
}

Kerrion • Oct 13 '23

Thanks for this. It definitely works with react.

Lewis Ingleton • Mar 18 '23

This worked a treat for react

naren67 • Mar 2 '21

Dont forget to use the position fixed property to fix that divison at the bottom of the page

MukhtaarAziz • Feb 28 '21

Thank you, great article

Lisandra • Nov 1 '23

Amazing! Thanks!

Sukhman • Jan 22 '23

thank you for sharing

Akhila • May 14 '22

This helped me. Thank youu <3

Jessie Rohrer • Jun 8 '21

Thanks so much for this! This was the simplest solution I could find and worked perfect for my project :)

Franky Blondeel • Nov 16 '22

Thanks for this post and also the resulting comments, they have all been very helpful 🙏

CitronBrick • Feb 28

You can enable syntax highlighting in Dev.to as follows:

triple_backtick language_name
code
triple_backtick