Javascript / jQuery height calculation

Question

I am looking for a way, in javascript, to calculate the size of the browser (px) and then calculate the size of the <div> by removing 50px from this full-screen size:

eg.

 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 750px and apply it as an 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 that you mean the height of the document, not the height of the browser. 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 really specified the height of the browser, not the height of the document, replace $(document) with $(window) .