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

我使用div-Element来保存一些注释.我基本上使用jQuery添加更多评论,如下所示：

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

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

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

解决方法

关于“如何计算元素高度”的一般问题,可在此处找到一些信息： 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’,07001.

原文地址：https://www.jb51.cc/css/217554.html