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
