My footer will not stick to the bottom

Question

So I am making a website like a little mock up one as I have just started learning and the footer just won't stay at the bottom and it is killing me. When I load the page it starts at the bottom and then when I scroll down it stays in the same place and is stuck where it started and won't start at the bottom of the page.

#footer {
    text-align: right;
    padding: 10px;
    background-color: #07889B;
    position: absolute;
    bottom: 0;
    width: 1200px;

}

There is many ways to achieve that eg. You set for everything else beneath footer min-height: 100vh and footer will always be at the bottom — Zydnar, Jul 04 '17 at 22:07

score 1 · Answer 1 · answered Jul 04 '17 at 22:04

1

This should work

#footer {
    text-align: right;
    padding: 10px;
    background-color: #07889B;
    position: fixed;
    bottom: 0;
    left:0;
    width: 1200px;//or width:100%;
}

answered Jul 04 '17 at 22:04

Sameer

383
1
10

Nope that just made it go to the left – Max Loyd Jul 04 '17 at 22:06
This would work, you must be giving it a float on top or inside. Check the fiddle. https://jsfiddle.net/fh49mank/ – Sameer Jul 04 '17 at 22:18

My footer will not stick to the bottom

1 Answers1