If the 70% is relative to the height of the window, you could just get the
height of the window and multiply it by .7. Just include dimensions and run
something along the lines of this:
$(function() {
var fixHeight = function() {
$('#foo').height( $(window).height()*.7 );
};
fixHeight();
$(window).bind('resize', fixHeight);
});
--
Brandon Aaron
On 8/10/07, Gordon <[EMAIL PROTECTED]> wrote:
>
>
> I need some help with a problem with a div and getting its height. I
> am wanting to design a layout that will work across across different
> browser window sizes, so I want to make my main div into which my AJAX
> content is injected defined by percentage widths and heights. For
> example,
>
> <div id="foo" style="position: relative; overflow: hidden; width:
> 70%;" height: 70%;"></div>
>
> As jQuery only really works with pixels, I need to find the pixel
> width and height of this div with the width () and height ()
> functions. I can then calculate how big the content needs to be based
> on the results (say I want to put the items in a grid that is four
> across and four up, I define the width and height of each element I
> insert into the container div as the container's width and height
> divided by four).
>
> The problem is, at first this div is empty. Its content is generated
> dynamically by an AJAX routine that runs when the document loads. The
> script determines how many items were in the XML and generates a HTMl
> element to represent each item. The width and height of the contained
> item is determined based on getting a number of them to fit across and
> up inside the container in a grid pattern. This means in internet
> explorer 6 the div behaves as if its height is auto, and because it
> has no content it collapses down to a height of 0 px. The result iws
> all the content elements also get a height of 0px.
>
> I tried setting the body height to 100%, and this almost works in IE6,
> but as the AJAX content loads and is injected into the container div
> its height fluctuates (which looks quite ugly!) and it's finishing
> height is ever so slightly different from the start height, leading to
> some partial cutoff of the bottom row of elements or partial exposure
> of the first row of elements that should be hidden by overslowing the
> div.
>
> In internet explorer 7 I get a different problem. The div displays
> with the correct height regardless of whether or not it has content,
> but the height() function seems to return a value that is totally
> wrong, underestimating the actual height by more than half. This
> makes my content elements a lot shorter than they should be and again
> can lead to them being cut off incorrectly.
>
> If I specify a hight in an explicit unig (pixels, ems, etc) then both
> IE6 and 7 get the correct height and the content displays as
> intended. When using the percentage height all my other test browsers
> (Firefox 1.5, Opera 8 and 9, Safari 3) behave as intended.
>
> The dimensions plugin doesnt' seem to help out here, and to be honest
> I'm already using the fxQueue plugin, the interface plugin and the
> blockUI plugin and I really don't want to overload the client with a
> dozen scripts and mess up the download time for the page.
>
> Does anyone know what's going on and what I can do about it? I really
> don't want to have to fix explicitly on a size for my content div
>
>
