Determining the height of an HTML table that is dynamically filled

Question

Hi there,

I would like to draw a diagram in HTML. The positioning structure looks like this:

  <div id='hostDiv'>
    <div id='backgroundDiv'>
     ... drawing the background ...
    </div>
    <div id='foregroundDiv' style='position: absolute;'>
     ... drawing the foreground ...
    </div>
  </div>

The foreground contains a Table element that is dynamically populated with text, hence the row heights might alter depending on the amount of text going into a cell. How can I predict the final height of the Table element in the foregroun? I need this information to set the correct height of the background. Is there a way to pre-render the Table from Javascript and read out its height? Or some other trick?

PS. The size of the hostDiv may vary as the browser resizes.

Answer 1

There isn't any way to predict the height without actually rendering it in the target browser.

Once you do that, you can use (for example) jQuery to get the height of the element:

var height = $('#myTable').height();

Answer 2

While using jquery, you can actually find out the height of the table before it is rendered to the user. Use a construct like this (liberally borrowing code from the person above me):

$(document).ready(function () { var height = $('#myTable').height(); });

Answer 3

You can't predict the overall height of the element until after load as the browser will render and position elements depending on the adjacent elements and the size of the viewing window.

That said, you can use most any js library to find what you are looking for. In Prototype, it's:

$('navlist-main').offsetHeight

This will recursively add up the rendered height (not just the styled height) for each child element and any associated margin and padding and return an accurate figure for element height.

Answer 4

If you simply don't want to display the table before resizing the foregorund div:
Set style.visibility="hidden" on the table. Unlike display:none, this does not remove the div from the document flow and so the foreground div will still be properly sized (the table will simply not be visible).

Of course, if acceptable, you could move foregroundDiv into backgroundDiv and remove absolute positioning. backgroundDiv will then automatically resize to contain foregroundDiv (and the table).