How to stick a footer to bottom in css?

Question

I am having the classic problem for the positioning of a Footer on the bottom of the browser. I've tried methods including http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ but to no good result: my footer always keeps appearing in the middle of the browser window in both FF and IE.

In the HTML i got this simple structure

<form>
 ...
 <div class=Main />
 <div id=Footer />
</form>

Here is the css code that is relevant for the css footer problem:

    *
    {
        margin: 0;
    }


html, body
{
    height: 100%;
}


    #Footer
    {
        background-color: #004669;
        font-family: Tahoma, Arial;
        font-size: 0.7em;
        color: White;
        position: relative;
        height: 4em;
    }



    .Main
    {
        position:relative;
        min-height:100%;
        height:auto !important;
        height:100%;

        /*top: 50px;*/

        margin: 0 25% -4em 25%;

        font-family: Verdana, Arial, Tahoma, Times New Roman;
        font-size: 0.8em;
        word-spacing: 1px;
        line-height: 170%;
        /*padding-bottom: 40px;*/
    }

Where am I doing wrong? I really have tried everything. If I missed any useful info please let me know.

Thank you for any suggestion in advance.

Regards,

thank you all for your answers. it worked with:

position:absolute;
    width:100%;
    bottom:0px;

setting position:fixed did not work in IE for some reason(Still showed footer in the middle of the browser), only worked for FF.

in 2019 it is very easy to do [with **`flexbox`**](https://css-tricks.com/couple-takes-sticky-footer/#article-header-id-3) — Fabrizio Bertoglio, May 15 '19 at 16:40

score 65 · Accepted Answer · edited Apr 29 '16 at 14:14

65

Try setting the styles of your footer to position:absolute; and bottom:0;.

edited Apr 29 '16 at 14:14

Liam McArthur

1,033
3
18
42

answered Sep 28 '09 at 18:28

Nick Larsen

18,631
6
67
96

5

because what you're doing is not the classic sticky footer that sticks to the bottom of the page and if the page is 100% visible to the bottom of the window. – markus Sep 28 '09 at 19:33
17

thats correct, even if the page is longer than the fold, the footer will start to cover some of the content and remain visible at all times with this method – Nick Larsen Sep 28 '09 at 19:59
Here's a sort of expanded version of this same solution: http://stackoverflow.com/a/20114486/618649 – Craig Tullis Dec 01 '13 at 21:52
1

but on tablets or 10 inch laptops it even overlapes the above the fold content. – Ravinder Payal Mar 30 '15 at 12:47
I would add that if the footer is nested into a top-level component, then this top-level component should have the property "position: relative" in the corresponding css file, like that: .top{position: relative; .footer{position: absolute; bottom: 0px;}} – Vladimir Aug 24 '21 at 03:33

score 52 · Answer 2 · edited Sep 28 '09 at 18:52

52

#Footer {
  position:fixed;
  bottom:0;
}

That will make the footer stay at the bottom of the browser window no matter where you scroll.

edited Sep 28 '09 at 18:52

Carson Myers

37,678
39
126
176

answered Sep 28 '09 at 18:27

codedude

6,244
14
63
99

And precisely what I was looking for ;) – Aleks Mar 11 '14 at 17:34
you might wanna add a `width: 100%;` to that to make it full width – Exodus Reed Sep 20 '22 at 19:37

score 15 · Answer 3 · answered Nov 11 '11 at 23:58

15

#Footer {
position:fixed;
bottom:0;
width:100%;
}

worked for me

answered Nov 11 '11 at 23:58

Sheikh Naveed

305
3
10

score 7 · Answer 4 · edited Apr 14 '23 at 15:36

I think a lot of folks are looking for a footer on the bottom that scrolls instead of being fixed, called a sticky footer. Fixed footers will cover body content when the height is too short. You have to set the html, body, and page container to a height of 100%, set your footer to absolute position bottom. Your page content container needs a relative position for this to work. Your footer has a negative margin equal to height of footer minus bottom margin of page content.

score 7 · Answer 5 · answered Jul 18 '20 at 19:23

7

Assuming you know the size of your footer, you can do this:

    footer {
        position: sticky;
        height: 100px;
        top: calc( 100vh - 100px );
    }

answered Jul 18 '20 at 19:23

ndvo

939
11
16

Replacing 'fixed' Worked for me, footer { position: fixed; height: 100px; top: calc( 100vh - 100px ); } – Mohammad Abraq Dec 15 '20 at 22:29
Using css native variable eg. --footer-height: 100px; make code easy to use :) – procek Oct 18 '21 at 12:22
+1 for using sticky instead of fixed. Sticky leaves the footer positioned relative to its container, whereas fixed places the footer relative to the viewport. – Vincent Apr 11 '23 at 18:15

score 5 · Answer 6 · answered Apr 16 '16 at 05:54

5

#footer{
position: fixed; 
bottom: 0;
}

http://codepen.io/smarty_tech/pen/grzMZr

answered Apr 16 '16 at 05:54

Bhawna Malhotra

476
5
18

score 2 · Answer 7 · edited Nov 17 '12 at 14:36

2

If you use the "position:fixed; bottom:0;" your footer will always show at the bottom and will hide your content if the page is longer than the browser window.

edited Nov 17 '12 at 14:36

Brad Larson

170,088
45
397
571

answered Apr 04 '12 at 15:50

Chtioui Malek

11,197
1
72
69

1

That does work nicely and is much less troublesome than other solutions (especially if you have a variable-height footer), but the obvious downside is that it uses JS. – Synchro Apr 18 '12 at 12:08

score 2 · Answer 8 · answered Mar 12 '19 at 16:55

For modern browser, you can use flex layout to ensure the footer stays at the bottom no matter the content length (and the bottom won't hide the content if it is too long)

HTML Layout:

<div class="layout-wrapper">
  <header>My header</header>
  <section class="page-content">My Main page content</section>
  <footer>My footer</footer>
</div>

CSS:

html, body {
  min-height: 100vh;
  width: 100%;
  padding: 0;
  margin: 0;
}

.layout-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.layout-wrapper > .page-content {
  background: cornflowerblue;
  color: white;
  padding: 20px;
}

.layout-wrapper > header, .layout-wrapper > footer {
  background: #C0C0C0;
  padding: 20px 0;
}

Demo: https://codepen.io/datvm/pen/vPWXOQ

you wrote the correct solution and you could update it [as here explained](https://css-tricks.com/couple-takes-sticky-footer/#article-header-id-3) — Fabrizio Bertoglio, May 15 '19 at 16:35

score 2 · Answer 9 · answered Dec 15 '20 at 22:34

2

So a Mixed Solution from @nvdo and @Abdelhameed Mahmoud worked for me

footer {
    position: sticky;
    height: 100px;
    top: calc( 100vh - 100px );
}

answered Dec 15 '20 at 22:34

Mohammad Abraq

99
2
5

score 2 · Answer 10 · answered Sep 26 '21 at 17:34

2

Try position attribute with fixed value to put your division in a fixed position. Following is the code for putting your footer at bottom of the page.

footer {
    position: fixed; 
    bottom: 0;
}

answered Sep 26 '21 at 17:34

Codemaker2015

12,190
6
97
81

position: fixed could overlap the main content where position: sticky would push the content – Clemzd Dec 16 '22 at 16:54

score 1 · Answer 11 · answered Apr 22 '14 at 06:08

1

This worked for me:

.footer
{
  width: 100%;
  bottom: 0;
  clear: both;
}

answered Apr 22 '14 at 06:08

rzskhr

931
11
10

score 1 · Answer 12 · answered Oct 08 '14 at 17:42

1

The following css property will do it

position: fixed;

I hope this help.

answered Oct 08 '14 at 17:42

Abdelhameed Mahmoud

2,118
2
22
17

score 0 · Answer 13 · answered Apr 11 '23 at 18:34

A sticky footer without covering your content.

If you position your footer using "bottom:0px", it will always stay at the bottom of the viewport even if the viewport is too small to display all the content, which means it will cover part of your content.

If you want your footer stuck to the bottom, but you always want it to remain below the content of your container, then you do this:

.body{height:100%}  // Or whatever container you want
.footer{position:sticky;top:100vh}

The 100vh will keep the footer at the bottom when there is enough space to see it, but because it's not an absolute position it will not push up above the bottom of the container's content.

Dillie-O · Answer 14 · 2009-09-28T19:35:11.633

-1

I had a similar issue with this sticky footer tutorial. If memory serves, you need to put your form tags within your <div class=Main /> section since the form tag itself causes issues with the lineup.

edited Sep 28 '09 at 19:35

answered Sep 28 '09 at 18:27

Dillie-O

29,277
14
101
140

could you pease elaborate your solution could be correct but i did not understand it completely: put the form tags where exactly? – Amc_rtty Sep 28 '09 at 18:52
:: Looks at answer:: Look at that, it filtered out the tag. Updated the answer. Does that make sense? – Dillie-O Sep 28 '09 at 19:35
Andrei is talking about sticky footer, what you're implementing is not a sticky footer as such. – markus Sep 28 '09 at 19:35

Benjamin Toh · Answer 15 · 2020-10-05T09:03:08.237

-1

I agree with Luke Vo's solution. I thought it would better to omit justify-content: space-between; from layout-wrapper and add margin-top: auto; to footer.

You wouldn't want your body to be hanging in the middle and only have footer pushed to the bottom.

This approach addresses any content extending beyond the viewport.

edited Oct 05 '20 at 09:03

answered Oct 05 '20 at 08:55

Benjamin Toh

9
3

1

I think this should be a comment as it seems to be no stand-alone-answer. – jasie Oct 05 '20 at 09:14

score -1 · Answer 16 · answered Aug 21 '21 at 14:27

The following code works, which is from w3schools.com

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: red;
   color: white;
   text-align: center;
}
</style>
</head>
<body>

<h2>Fixed/Sticky Footer Example</h2>
<p>The footer is placed at the bottom of the page.</p>

<div class="footer">
  <p>Footer</p>
</div>

</body>
</html>

How to stick a footer to bottom in css?

16 Answers16

Linked

Related