[jQuery] Make a div expand to take up the rest of the viewport?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html;charset=ISO-8859-1" http-equiv="Content-Type">
<title></title>
</head>
<body bgcolor="#ffffff" text="#000000">
<font size="-1"><font face="Helvetica, Arial, sans-serif">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:
</font></font><font size="-1"><font face="Helvetica, Arial, sans-serif">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.
</font></font>
<div class="moz-signature">--
<div
style="font-family: sans-serif; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; line-height: 1.1; font-size-adjust: none; font-stretch: normal; width: 300px; color: rgb(51, 51, 51);">
<strong>Phillip B Oldham</strong>
</div>
</div>
</body>
</html>