我想用HTML绘制一个图表。定位结构如下所示：

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

前台包含一个动态填充有文本的Table元素，因此行高可能会根据进入单元格的文本量而变化。
如何预测前景色中Table元素的最终高度？我需要此信息来设置背景的正确高度。有没有一种方法可以从Javascript中预先渲染表格并读出其高度？还是其他技巧？

PS。 hostDiv的大小可能会随着浏览器大小的变化而变化。

解决方案

如果没有在目标浏览器中实际渲染高度，就无法预测高度。

完成此操作后，我们可以使用(例如)jQuery来获取元素的高度：

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

使用jquery时，实际上可以在将表格呈现给用户之前找出表格的高度。使用这样的结构(从我上面的人那里借用代码)：

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

加载后才能预测元素的整体高度，因为浏览器将根据相邻元素和查看窗口的大小来渲染和定位元素。

也就是说，我们可以使用几乎所有js库来查找所需内容。在原型中，它是：

$('navlist-main').offsetHeight

这将递归加总每个子元素的渲染高度(而不仅仅是样式化的高度)以及任何关联的边距和填充，并返回元素高度的准确数字。

如果我们只是不想在调整foregorund div的大小之前显示表格，请执行以下操作：
在桌子上设置style.visibility =" hidden"。与display：none不同，这不会从文档流中删除div，因此前景div的大小仍将适当调整(表将根本不可见)。

当然，如果可以接受，我们可以将前景色移至backgroundDiv并删除绝对位置。然后，backgroundDiv将自动调整大小以包含前景Div(和表)。