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

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

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.