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.
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).
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments