Question

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.

Earlier this application was fixed in a 1024×768, but now we want the application to scale both in width and height.

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

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.

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

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.

I’m looking for something like:

HTML:

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

And then call something like this:

<script language="javascript" type="text/script">
   MakeElementGrowWithWindowSize('bottomGrid');
</script>

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

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.

Answer 1

Something along the lines of the following will work, however you’ll need to amend this code to make allowances for padding on your div or the body.

$(document).ready(function () {
    $(window).resize(function() {
        $("#bottomGrid").css({width: $(this).width() + 'px', height: $(this).height() + 'px'});
    });
});

Also, as a side note, it is possible to get 100% height working purely in HTML, the caveat being that all elements in the DOM above the one you want to be 100% height must have their height set.