How to make element grow with window resize (javascript)
<p>I'm in the process of rewriting a "web application" (i.e. not "web page", but a line of business application) from fixed size to free flow.</p>

<p>Earlier this application was fixed in a 1024x768, but now we want the application to scale both in width and height.</p>

<p>Setting width=100% on divs etc solves the width problem. But we are having problems with height.</p>

<p>I'm looking for a javascript solution what will alow me to specify that certain elements should fill the remainder of the visible browser window. And also continue to do this on window resize.</p>

<p>Browser requirements: Internet Explorer 6.0 and up (Firefox etc not an issue).</p>

<p>Usually there is a grid of some kind on the bottom of the screen. This is specified with fixed height today and an overflow: auto; style to make a scrollbar appear if needed.</p>

<p>I'm looking for something like:</p>

<p>HTML:</p>

<pre><code>..
..lots of other elements
..
&lt;div id="bottomGrid" style="width: 100%; height: 200px; overflow: auto;"&gt;
    I wish this grid would grow with the screen size.
&lt;/div&gt;
</code></pre>

<p>And then call something like this:</p>

<pre><code>&lt;script language="javascript" type="text/script"&gt;
   MakeElementGrowWithWindowSize('bottomGrid');
&lt;/script&gt;
</code></pre>

<p>I've tried setting height: 100% but that does not work. Changing doctype from XHTML to HTML4 breaks a whole lot of other stuff so I really hope to solve this with some clever javascript (jquery is fine).</p>

<p>As usual we are in a hurry and have little time and money to spend + this is a "huge" application. Rewriting the html and styles are not really an option.</p>
