i have 3 divs

header

content

footer

the content hieght is dynamic (can be expanded and collapsed by the user at run time)

if the sum of the height of the 3 divs is bigger the the window's height every thing is fine

but when it is smaller (the user reduced the size of the content div) the footer is positioned right after the content and there is a white space underneath the footer. in such a case I want the footer to be at the bottom of the window

each time the content is collapse or expanded i call a function the reposition the footer

1. function pos()
   {
    if($('body').height()<$(window).height())
               {
                   $('#content').height($(window).height()-$("#header").outerHeight()-$("#footer").outerHeight());
               } else {
                   $('#content').css('height','auto');
               }
   }

I know it has to work, but it is not!

console.trace tells me that the body size is (sometimes) bigger than it is really is therefore it execute the else and not the if

I tried also

 

1. if(($('#header').outerHeight()+('#content').outerHeight()+('#footer').outerHeight()))<$(window).height())

maybe there is a better way?