Forcing footer to bottom of page, if document height is smaller than window height

Question

I'm working on fixing the display of my website in ipad's portrait mode. The issue is that the page length isn't as long as the ipad's portrait display. Here is a pic of what I'm talking about:

I created a jQuery function that I thought would detect when the document height isn't as big as the window height, which then I could set the position of the footer to fixed. Here is my code:

if ($(document).height() < $(window).height()) {
    $('#footer-wrapper').attr('style', 'position: fixed!important; bottom: 0px;');
}

Current CSS:

#footer-wrapper {
    padding: 20px 0px 23px;
    background-color: #E3E9DC;
    border-bottom: 3px solid #007897;
    border-top: 3px solid #007897;
    color: #585858;
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    text-align: center;
}

@media screen and (max-width: 1024px) {
    #footer-wrapper {
        /*padding: 20px 0px 23px;*/
        background-color: #E3E9DC;
        border-bottom: 3px solid #007897;
        border-top: 3px solid #007897;
        color: #585858;
        position: relative;
        margin-bottom: -65px!important;
        width: 100%;
        text-align: center;
    }
}

I think this could work, but for some reason the document is saying that its height is bigger than the window viewport, so the if statement isn't executed. Does anyone know a more reliable way of achieving this?

Answer 1

simply change javascript to:

if ($(document.body).height() < $(window).height()) {
  $('#footer-wrapper').attr('style', 'position: fixed!important; bottom: 0px;');
}

Answer 2

Unfortunately body height can be set to 100%. Here is the solution dealing only with footer

$(window).on('load resize scroll', function() {
    var f = $('#footer-wrapper');
    f.css({position:'static'});
    if (f.offset().top + f.height() < $(window).height()) {
        f.css({position:'fixed', bottom:'0', width:'100%'});
    }
});