Stretch DIV to height of table cell

I am working on a web app that consists of a treeview on the left and content on the right. The basic layout is a table with the height of the content determining the overall height of the table.

This basically means the treeview has to be scrollable, since it’s possible that the table height is less than the tree height. Simple enough…put the treeview inside a DIV and change its “height” style attribute to 100%.

Works in IE6 but does not in FireFox. After Googling for hours and not finding a good solution, I devised a function to make this work. In my function, the params are the ID’s of the main table and the DIV containing the treeview. The code first sets the height of the scrollable DIV to 0. This allows the main table to adjust to its normal height. Then the DIV’s height is set to the same as the table height.

Works in IE6 and FireFox.

function setScrollerHeight(mainTableId, explorerScrollerId)
{ 
         var mainTable = document.getElementById(mainTableId); 
         var scroller = document.getElementById(explorerScrollerId); 
         if (!scroller) return; 
         if (mainTable.clientHeight > 0) 
         { 
                  scroller.style.height = “0px”; 
                  scroller.style.height = mainTable.clientHeight; 
         }
         else 
                  scroller.style.height = “500px”; }