Javascript+CSS: calculate a height value on resize

I couldn't get my CSS to make a scrollable area correct, for a website i'm working now.

Normally, you can, with a little css, tell the browser to display a scrollbar for content that goes beyond its container's limits.

for instance, "overflow:auto". Yet for this to work, you need to give that container a 'height' value. But since my layout stretches on the entire height of the browser's viewport, that height value cannot be fixed... unless you'd use a little javascript that calculates the available height and writes the calculated value.

Anyway, i found that most of what i wanted was already done at the famous infamous quirksmode website, so i adapted to suit my needs.

here is the main function : (i dumped it in an external .js script called "viewport.js")

PLAIN TEXT
JavaScript:
  1. <!-- gives viewport dimension according tu user screen -->
  2. // THIS FUNCTION RESIZES
  3. // THE VIEWPORT SO THAT
  4. // THE FULLPAGE IS USED,
  5. // AND THE CONTENT IS SCROLLABLE
  6. // WITH HEADER FOOTERS DISPLAYED AT ALL TIME
  7.  
  8. function sizeViewport(myObj,mySize) {
  9. myObject = document.getElementById(myObj);
  10. // THIS BIT DETECTS THE AVAILABLE SCREEN SPACE
  11. // IT ORIGINATES FROM http://www.quirksmode.org/viewport/compatibility.html
  12.  
  13. var x,y;
  14. if (self.innerHeight) // all except Explorer    {
  15. x = self.innerWidth;
  16. y = self.innerHeight;
  17. }
  18. else if (document.documentElement && document.documentElement.clientHeight)
  19. // Explorer 6 Strict Mode
  20. {
  21. x = document.documentElement.clientWidth;
  22. y = document.documentElement.clientHeight;
  23. }   else if (document.body)
  24. // other Explorers
  25. {
  26. x = document.body.clientWidth;
  27. y = document.body.clientHeight;
  28. }
  29. // THIS IS THE ACTUAL RESIZING OF THE VIEWPORT
  30. viewportHeight = y - mySize;
  31. myObject.style.height = viewportHeight + "px";
  32. return 'resized';
  33. }

Secondly, you call your external .js file inside your html page:

Lastly, you just call the function, indicating the div to receive the height value, make sure you replace the '300' value by the one you need

PLAIN TEXT
JavaScript:
  1. function onResizeHandler() {
  2. // ALL FUNCTION CALLS TO PERFORM ON RESIZE...
  3. sizeViewport('viewport','300');
  4. }
  5. function onLoadHandler() {
  6. // ALL FUNCTION CALLS TO PERFORM ON LOAD...
  7. sizeViewport('viewport','300');
  8. }
  9. window.onresize = onResizeHandler;
  10. window.onload = onLoadHandler;

it's working almost ok: the only case in which it screwes up, is if you use "doubleclicking" the browser title bar to expand/minimize the window, the script does not act, as there aren't any "onDoubleclickBrowserTitlebar" event in Javascript yet.
All the best,
Alex