DEV Community

Cover image for How to make footer stick at the bottom of web page.
Nehal Ahmad
Nehal Ahmad

Posted on

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

#css #webdev #html

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 footer is not at the bottom of page and there is white space at the bottom because there is not much content.
image

here is simple html code that produce this result which is not we want.



<body>
    <header>
        <h1>This is Header.</h1>
    </header>

    <article>
        <h1>This is main content.</h1>
    </article>

    <footer>
        <h1>This is Footer.</h1>
    </footer>
</body>
Enter fullscreen mode Exit fullscreen mode

As you can see there are not much content so my footer is not in the bottom of the page. Technically it is bottom of the page but our page is not long enough.

Solution

Setting body height 



body {
    min-height: 100vh;
}
Enter fullscreen mode Exit fullscreen mode

We can set our body min height to 100vh that will make our page at least as long as screen height But it will not solve our problem.

Setting margin top on footer 



footer {
    margin-top: ???px;
}
Enter fullscreen mode Exit fullscreen mode

We can set margin-top on footer element that will make our footer to stay at the bottom of the page but when we have multiple pages and every page has different content length we have to set right amount of margin on every page one by one.

Using Flexbox

Using Flexbox in CSS we can fix it very easily with following steps.

  1. First set the min-height of body to 100vh. min-height: 100vh;.
  2. Set the body display to flex display: flex; and flex-direction to column flex-direction: column;.
  3. Select footer element (of whatever you want to stick to bottom) and set top margin to auto margin-top: auto;.

Your CSS should look something like this.



body{
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
footer{
    margin-top: auto;
}
Enter fullscreen mode Exit fullscreen mode

And the problem should be fixed.
image

There is a great article on flexbox on css-trick.com to learn more about it. https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Bonus: Align content vertically center

When you don't have much content to fill the full height of screen like simple login form, you you may want to align your content vertically center.
To do this just remove margin top from footer and set margin top and bottom to auto margin: auto 0; on your main content (in my case article element) or margin: auto; to center it on both direction (vertically and horizontally) and it will make content align to center.

Your CSS should look something like this.



body{
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
article {
    margin: auto 0;
}
Enter fullscreen mode Exit fullscreen mode

Latest comments (27)

Collapse
 
abdul_samad_ba518dc1dc740 profile image
Abdul Samad • • Edited

You can also try this for #Footer, position (fixed) is for not moving & stuck where you do, and viewport width(vw) is the view of your screen that we use, 100vw for 100% view of your screen area. 

position: fixed;
bottom: 0;
width: 100vw;
Enter fullscreen mode Exit fullscreen mode
Collapse
 
citronbrick profile image
CitronBrick •

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

triple_backtick language_name
code
triple_backtick

Collapse
 
lisichaviano profile image
Lisandra •

Amazing! Thanks!

Collapse
 
sbouwnsv profile image
Sukhman •

thank you for sharing

Collapse
 
hamanel profile image
Manel •

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

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

footer {
  position: absolute;
  bottom: 0;
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
kaysi profile image
Kerrion •

Thanks for this. It definitely works with react.

Collapse
 
lewisingleton profile image
Lewis Ingleton •

This worked a treat for react

Collapse
 
mrfranks profile image
Franky Blondeel •

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

Collapse
 
akhilalekha profile image
Akhila •

This helped me. Thank youu <3

Collapse
 
jrrohrer profile image
Jessie Rohrer •

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

Collapse
 
naren67 profile image
naren67 •

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

Collapse
 
cpmech profile image
Dorival Pedroso •

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;
Enter fullscreen mode Exit fullscreen mode

Where you can also get sticky header and more.

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

Cheers.

View full discussion (27 comments)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.