asked on

Using jquery to set a content area to height of page with sticky footer

http://www.playerspace.com/index.cfm/action/aboutus

I am using jquery to set a sticky footer where the content doesn't extend below the fold.

If I didn't there would be space under the footer to the bottom of the browser window.

Unfortunately on pages where this takes place, like the link included above, the content area has a gap between the bottom of the container and the sticky footer.

Can anyone tell me how I can set the height of the white content container to meet the footer with jquery on page load?

ASKER CERTIFIED SOLUTION

ondrejko1

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

Imaginx

I do something similar ...

function setFooterPosition(){

f($('#home_page_footer').length >0 ){      
            var footer = $("#home_page_footer");
            var pos = footer.position();
            var height = $(this).height();
            height = height - pos.top;
            height = height - footer.height();
            if (height < 500 && height > 0) {
                  $("#content").height($(this).height()-258);                                                                                                                                        
            }      
      }

}

$(document).ready(function(){
   setFooterPosition();
});
$(window).resize(function(){
   setFooterPosition();
});

Open in new window

this way the footer is sticky when the page loads and when the browser is resized.
hope it helps !

ondrejko1

ASKER

Yeah I ended up adding that later.