CSS：如何计算块元素的高度？

Question

我使用一个包含一些评论的 div-Element。我基本上使用 jQuery 来添加更多的评论，如下所示：

$(myDiv).append(
 '<li>'
 + '<img width="32px" height="32px" src="mySource"/></a>'
 + '<p>' + myComment + '</p>'
 + '</li>'
);

问题是，似乎整个 div 的高度没有正确更新！当我添加更多评论时，div 的高度会增加，但还不够，所以在一些评论之后它往往会溢出。

元素的高度实际上是如何计算的？

Answer 1

关于“如何计算元素的高度”的一般问题，可以在这里找到一些信息：http : //www.w3.org/TR/CSS2/visudet.html#Computing_heights_and_margins

如您所见，这有点复杂。

部分摘录：

'overflow' 计算为 'visible' 时正常流中的块级非替换元素

本节也适用于正常流中的块级非替换元素，当 'overflow' 不计算为 'visible' 但已传播到视口。

[. . .]

如果 'height' 是 'auto'，则高度取决于元素是否有块级子元素，是否有内边距或边框：

如果它只有行内级子元素，则高度是元素顶部之间的距离最上面的行框和最下面的行框的底部。

如果它有块级子框，则高度是没有边距折叠的最顶层块级子框的顶部边框边缘与通过它折叠的最底部块级子框的底部边框边缘之间的距离没有通过它折叠的边距。

[. . . ]

只考虑正常流中的子节点（即忽略浮动框和绝对定位框，相对定位框不考虑偏移量）。

[. . . ]

当“溢出”未计算为“可见”时，正常流中的块级、非替换元素（除非“溢出”属性的值已传播到视口）。

如果 'height' 是 'auto'，则高度取决于元素'