$(myDiv).append( '<li>' + '<img width="32px" height="32px" src="mySource"/></a>' + '<p>' + myComment + '</p>' + '</li>' );
问题是,似乎整个div的高度没有得到正确更新!当我添加更多注释时div的高度增加,但还不够,所以在一些注释之后它往往会溢出.
如何实际计算元素的高度?
解决方法
如你所见,它有点复杂.
一些摘录:
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.