I believe that you may have to set html, body { width: 100%; height:
100%; } in your CSS and use a strict doctype to achieve this in a
reliable manner. I faintly remember doing something similar recently.
You may find that the 'over sizing' is cause by a margin on another
element or body.
--
On Apr 18, 7:06 pm, Phillip B Oldham <[EMAIL PROTECTED]> wrote:
> By the looks of things it puts a div over the full size of the
> document, rather than expand a div to the size of the viewport.
>
> On Apr 18, 9:17 am, Ariel Jakobovits <[EMAIL PROTECTED]> wrote:
>
> > doesn't the thickbox take up the viewport? look at that
>
> > ----- Original Message ----
> > From: Phillip B Oldham <[EMAIL PROTECTED]>
> > To: jquery-en@googlegroups.com
> > Sent: Wednesday, April 18, 2007 1:15:04 AM
> > Subject: [jQuery] Make a div expand to take up the rest of the viewport?
>
> > Hi all
>
> > I've been playing about trying to get an effect similar to Google
> > Calendar, where a div starts at a fixed point on the screen and then
> > expands to take up the rest of the viewport. I think my calculations
> > are off though, as I can get it to expand, but it always grows to about
> > 20px larger than the viewport. I'm doing this without any
> > margins/padding on any elements, and I've tried both relative and
> > absolute positioning of the div.
>
> > Here's what I've got so far:
>
> > jQuery.fn.expando = function(minwidth, minheight)
>
> > {
>
> > function doExpando(el)
>
> > {
>
> > var
>
> > windowHeight = jQuery(window).height(),
>
> > windowWidth = jQuery(window).width(),
>
> > offset = el.offset({ scroll: false }),
>
> > newHeight = windowHeight - offset.top,
>
> > newWidth = 'auto';
>
> > if( minheight && newHeight < minheight )
>
> > newHeight = minheight;
>
> > if( minwidth && el.width() < minwidth )
>
> > newWidth = minwidth;
>
> > el.height(newHeight);
>
> > el.width(newWidth);
>
> > }
>
> > var minwidth = minwidth || false,
>
> > minheight = minheight || false,
>
> > el = this;
>
> > doExpando(el);
>
> > jQuery(window).resize(function(){
>
> > doExpando(el);
>
> > });
>
> > return this;
>
> > }
>
> > I'm loading the dimensions plugin before this one, to help with the
> > calculations.
>
> > If I take 50px off the height it works ok:
>
> > newHeight
> > = (windowHeight - offset.top) - 50;
>
> > At the moment I've left it like that, but if some one had an idea why
> > it's over-sizing that would be great.
>
> > --
>
> > Phillip B Oldham
>
> > begin:vcard
> > fn:Phillip Oldham
> > n:Oldham;Phillip
> > org:The Activity People;Systems Development
> > email;internet:[EMAIL PROTECTED]
> > title:Chief Programmer
> > tel;work:0870 162 4847
> > x-mozilla-html:TRUE
> > url:http://theactivitypeople.co.uk/
> > version:2.1
> > end:vcard
