r3plica r3plica - 10 months ago 38
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:


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


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.


Change position:absolute for .footer to position: fixed