Databases
StackOverflow2013
Postsdbo
POHow to make element grow with window resize (javascript)
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to make element grow with window resize (javascript)
    text
    copied!<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>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload