How can i stick the footer to the bottom?

Question

How can I stick this footer to the bottom of the page:

<footer>
  <p>This is a Footer, Copyright &copy; &copy; 2017</p>
</footer>

https://jsfiddle.net/1d9m2frt/2/

footer {
        text-align: center;
        background-color: #e8491d;
        color: #ffffff;
        padding: 20px;
        margin-top: 20px;
}

I tried position: fixed; but it doesn't stay fixed on the bottom of the page.

Possible duplicate of [How to make a sticky footer using CSS?](https://stackoverflow.com/questions/29069498/how-to-make-a-sticky-footer-using-css) — Alex, May 22 '19 at 13:14
Possible duplicate of [How do you get the footer to stay at the bottom of a Web page?](https://stackoverflow.com/questions/42294/how-do-you-get-the-footer-to-stay-at-the-bottom-of-a-web-page) — Adam Buchanan Smith, May 22 '19 at 13:16

score 0 · Answer 1 · answered May 22 '19 at 13:23

There's a few different ways to do this, you can in fact use position: fixed;

When using position: fixed; you will need to specify the position using top: ; right: ; bottom: ; or left: ; attributes. For maximum browser compatibility use both top/bottom and left/right. IE doesn't like you using only one of them.

In this instance you will also need to specify width: ;

Amend your JSFiddle CSS as below:

footer {
    text-align: center;
    background-color: #e8491d;
    color: #ffffff;
    padding: 20px;
    margin-top: 20px;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
}

score 0 · Accepted Answer · answered May 22 '19 at 13:25

footer {
        text-align: center;
        background-color: #e8491d;
        color: #ffffff;
        padding: 20px;
        margin-top: 20px;
        position:fixed;
        width:100%;
        bottom:0;
        left:0;
        right:0;
}

thats all...

How can i stick the footer to the bottom?

2 Answers2