[jQuery] Problems with "auto height" of pages
I have a HTML structure like this:
<div id="header">...</div>
<div id="nav">...</div>
<div id="main">...</div>
<div id="footer">...</div>
I am trying to use jQuery to set the height of #main dynamically if it
is too small, to make the footer appear to be fixed to the bottom of
the page. In other words, #header and #nav are bars across the top,
#footer is a bar across the bottom, and #main takes up all remaining
space.
It works if there is no block content in #main - ie just text with no
paragraphs/divs. But as soon as one is added in, the height of main is
set too high, and the footer moves off the screen, producing
scrollbars. Here's the JS:
$(document).ready( function() {
var mainHeight = $("#main").height();
var totalHeight = $("body").outerHeight();
var fixedHeight = $("#header").outerHeight() + $
("#nav").outerHeight() + $("#footer").outerHeight();
if ( mainHeight < totalHeight-fixedHeight )
$("#main").height( totalHeight-fixedHeight );
});
Can anyone help?