Useful page. The example code didn't really work for some reason but I
took the theory and made it work!
Still unsure why the jQuery was playing up though - I pin-pointed that
it was the height of #main being reported incorrectly. I found the
options to include the margin - is this correct syntax?
var mainHeight = $("#main").outerHeight( {margin:true} );
It reports the exact same value as height(). The element itself
doesn't include margins but when there are block elements such as
headings/paragraphs, their margins increase the overall height of the
element.
Regards,
Scott.
On Sep 16, 2:26 am, "Brandon Aaron" <[EMAIL PROTECTED]> wrote:
> I'd recommend just using CSS for
> this.http://www.themaninblue.com/writing/perspective/2005/08/29/
> --
> Brandon Aaron
>
> On Mon, Sep 15, 2008 at 7:05 PM, RichUncleSkeleton
> <[EMAIL PROTECTED]>wrote:
>
>
>
> > 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?
