place footer at bottom only if page is "short"

Question

i have a website with several pages. each page has different height (obvious, but i mention it).

what i would like to achieve is that if the content of the page is lower then the browser viewport, the footer tag will get a fixed position and will be aligned to the bottom of the page.

iv'e tried this js:

$(function(){
if ($(document).height() > $("footer").offset().top+44) {
        $("footer").addClass('fixbottom');
    }
}
});

$(window).resize(function() {
    if ($(document).height() > $("footer").offset().top+44) {
        $("footer").addClass('fixbottom');
    }
});

and that css:

.fixbottom {
    width: 100%;
    position: fixed;
    bottom: 0;
}


footer {
height:44px;
    background: #7abde9;
    color: #ffffff;
    text-align: center;
}

the top+44 in my jquery is because my footer tag is 44 height iv'e used the document ready and window resize to make sure all situations should meet, but unfortunately that's does not seem to work in any case.

any help should be greatly appriciated

Answer 1

I didn't like the idea of a big wrapper containing everything, so I found this solution:

html {
    position: relative;    /*IMPORTANT: otherwise the footer aligns to the :root, which is 100vh*/

    min-height: 100%;    /*if the page is "short", the html takes it up completely anyway*/
}
body {
    margin-bottom: 10rem;    /*this is the height of the footer (if it is not fixed you can find a way using media queries*/
}
footer {
    position: absolute;
    bottom: 0;

    height: 10rem;    /*set whatever you want, but remember to keep it synced with the body*/
}

The important thing to remember is that margin-bottom must be set on the body, since the footer it positioned inside the html tag which is its direct parent.

---

DISCLAIMER:

I found this solution on my own, but I didn't check whether someone else has found it out on any other questions... In that case, feel free to reference them in the comments!

Answer 2

Possible solution in 2020: wrap the non-footer content in a tag and set the min-height of that tag to 100vh - the footer height:

HTML:

<main>
    <!--Page Content-->
</main>

<footer>
    <!--Footer Content-->
</footer>

CSS:

main {
    min-height: calc(100vh - <footer height>);
}

No JavaScript/jQuery needed.