CSS:如何计算 block 元素的高度？

Question

我使用一个包含一些注释的 div 元素。我基本上使用 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

如您所见，它有点复杂。

部分摘录:

Block-level non-replaced elements in normal flow when 'overflow' computes to 'visible'

This section also applies to block-level non-replaced elements in normal flow when 'overflow' does not compute to 'visible' but has been propagated to the viewport.

[. . .]

If 'height' is 'auto', the height depends on whether the element has any block-level children and whether it has padding or borders:

If it only has inline-level children, the height is the distance between the top of the topmost line box and the bottom of the bottommost line box.

If it has block-level children, the height is the distance between the top border-edge of the topmost block-level child box that does not have margins collapsed through it and the bottom border-edge of the bottommost block-level child box that does not have margins collapsed through it.

[. . . ]

Only children in the normal flow are taken into account (i.e., floating boxes and absolutely positioned boxes are ignored, and relatively positioned boxes are considered without their offset).

[. . . ]

Block-level, non-replaced elements in normal flow when 'overflow' does not compute to 'visible' (except if the 'overflow' property's value has been propagated to the viewport).

If 'height' is 'auto', the height depends on the element's descendants.