CODEWITHSUNDEEP
htmlcss
Filip Grebowski
Filip Grebowski

Reputation: 389

Footer not fixed to the bottom of the page

I tried having my footer stick to the bottom of the page, but the more content I add to my body, then it just goes out of bounds. I can't see a fault in my CSS, so hopefully one of you will be able to sort it.

.footer {
    padding-bottom: 0;
    background: gray;
    width: 100%;
    position: absolute;
    height: 50px;
    bottom: 0;
    left: 0;
    right: 0;
}

Here is a JSFiddle: https://jsfiddle.net/367apj76/

Many Thanks for the help.

Upvotes: 1

Views: 230

Answers (1)

Eran Shabi
Eran Shabi

Reputation: 15019

Remove the position: absolute; from .footer

UPDATE:

You should put everything but the footer in a div with the following CSS:

min-height: calc(100vh - *footer-height*px);

and the footer should go right after this div.

This will work because the new div cannot be smaller than the window size minus the footer, but grows with the window (that's what vh is for).

Upvotes: 2

Related Questions