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>

Answer 1

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).