Javascript/jQuery height calculation

Question

Im looking for a way, in javascript, to calculate the size of the browser (px) then calculate the size of a <div> taking away 50px from that full screen size:

E.g.

Browser screen size: 800px (Height)
Existing <div> that is always 50px (Height)
Leaves 750px (Height) for the remaining <div> to fill the page.

Then take that 750px and apply it as inline style:

<div style="height: 50px">
<img src="banner.png" />
</div>

<div style="height: x">
This fills the remainder of the page
</div>

If you want to check other properties (margin, padding and border) that can contribute to a DIV's height, use outerHeight - api.jquery.com/outerHeight — Greg K
– Greg K, Commented Apr 27, 2010 at 9:49

Andy E · Accepted Answer · 2010-04-27 09:44:20Z

5

I assume you mean document height, not browser height. You can do this using something like the following:

$("#div2").height($(document).height() - 50);

// or for more dynamicity
$("#div2").height($(document).height() - $("#div1").height());

If you did mean browser height and not document height, substitute $(document) with $(window).

answered Apr 27, 2010 at 9:44

Andy E

346k86 gold badges482 silver badges452 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

CLiown Over a year ago

Can you add another element to subtract: $("#div2").height($(document).height() - $("#div1") - $("#div3").height());

Andy E Over a year ago

@danit: if you want to, sure. Add as many elements as you like. Make sure you're calling the height() method on them, though -- eg. $("#div2").height($(document).height() - $("#div1").height() - $("#div3").height());

CLiown Over a year ago

Thanks, another question. Possible to resize #div2 when the document is resized? Tried .resize but thats for the window not the document.

Andy E Over a year ago

@danit, when the window resizes, so should the document. So you would use $(window).resize(function () { /* do calculation here */ }. Apparently, in Firefox the resize event will only fire when you finish resizing. In other browsers it fires as you are dragging the window.

Collectives™ on Stack Overflow

Javascript/jQuery height calculation

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related