DEV Community

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

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

nehalahmadkhan profile image Nehal Ahmad ・2 min read

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

Discussion (16)

pic
Editor guide
Collapse
ganymede profile image
Rudy Reeves • 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

Collapse
iamludal profile image
Ludal πŸš€

I often use this one, it seems more intuitive than having an automatic margin on the footer πŸ€”

Collapse
chakudi profile image
Vaishali JS

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

Collapse
naren67 profile image
naren67

grab that footer's class and do this
for example

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

thats it

Collapse
bgrand_ch profile image
Benjamin Grand

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.

Collapse
eduardonwa profile image
Eduardo Cookie Lifter

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

Thread Thread
cpmech profile image
Dorival Pedroso

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.

Collapse
naren67 profile image
naren67

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

Collapse
chaitanyavsh profile image
Chaitu Maverick

This is the coolest one TBH. :)

Collapse
dn_josh profile image
Dumte

This is the one I'm familiar with

Collapse
thecerealcoder profile image
Chris

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.

Collapse
naren67 profile image
naren67

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

Collapse
nehalahmadkhan profile image
Nehal Ahmad Author

Benjamin Grand is right.

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.

Collapse
naren67 profile image
naren67

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

Collapse
mukhtaaraziz profile image
MukhtaarAziz

Thank you, great article