Determining the height of an HTML table that is dynamically filled

Question

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(); });