Stretch DIV to height of table cell

March 8, 2005


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; 
                  scroller.style.height = “500px”; }

Founder NftyDreams; founder Decentology; co-founder DNN Software; educator; Open Source proponent; Microsoft MVP; tech geek; creative thinker; husband; dad. Personal blog: http://www.kalyani.com. Twitter: @techbubble
Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.