Found out what the main problem was for me: in FF, setting a hight
worked only part of the time. min-height also had to be set, which has
solved the problem.
I'm using a strict doctype, but setting height to 100% doesn't work.
On Apr 18, 2:00 pm, Ben Schwarz <[EMAIL PROTECTED]> wrote:
> 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
