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
-
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
- if(($('#header').outerHeight()+('#content').outerHeight()+('#footer').outerHeight()))<$(window).height())
maybe there is a better way?