r3plica r3plica - 3 months ago 7
CSS Question

Why is the footer not at the bottom

I have a site I am working on. I want to get the footer to stick to the bottom of the page.
So I followed a simple guide which basically did this:

html {
height: 100%;
}

body {
min-height: 100%;
position: relative;
padding-bottom: $footer-height + $footer-margin-top;
}

.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: $footer-height;
}


This seemed to work at the start. Then I got to a stage where the content was more than the view port height and that is when things stopped working.

If you look at this:

http://piiick-widget.azurewebsites.net/#/

you can see that the footer is at the bottom of the page. But if you look at this:

http://piiick-widget.azurewebsites.net/#/?matches=true

The footer is at the bottom of the viewport.
I know this is a simple fix, but I can't figure it out.
Can someone give me a hand please.

Answer

Change position:absolute for .footer to position: fixed

Comments