How to create dynamic div height based on the height of a browser window?

Question by John M: How to create dynamic div height based on the height of a browser window?
We’ve all seen elastic width web pages. How can I create a similar look vertically?
I basically have a div that needs to be a maximum height of 600px, so it will stay that size no matter how big the browser window is. But as the browser window height becomes less than 600px, the div height needs to shrink proportionately until its minimum height is about, say, 100px.
Anyone know how to do this? I’d like to use css, but javascript or jquery will work as well…

Best answer:

Answer by gitter1226
Sure, this isn’t too hard.

First you have to create the javascript event handler for the window’s on_resize event (check spelling).

In that function grab the height of the window height property off the dom and set the div height appropriately.

That window height is found differently depending on the browser. In IE it is document.body.offsetHeight and in Firefox it is window.innerHeight. You can then use getElementById to get a handle on your div and use div.style.height = yourValue; Just set that height to the height of the window and cap it at 600 and 100 using code.

Add your own answer in the comments!