CSS：如何计算块元素的高度？ [英] CSS: How is height of block-elements calculated?

问题描述

我使用一个div-Element包含一些注释。我基本上使用jQuery添加更多评论，如：

I use a div-Element that holds some comments. I basically use jQuery to add more Comments like so:

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

问题是，看起来整个div的高度不能正确更新！ div的高度增加，而我添加更多的评论，但不够，所以在一些评论后，它往往会溢出。

The problem is, that it seems that the height of the whole div doesnt get updated properly! The height of the div increases while I add more comments, but not enough, so after some comments it tends to overflow.

元素的高度是如何计算的？

How is the height of an element actually calculated?

推荐答案

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

Regarding the general question of "How is the height of an element calculated", some info can be found here: http://www.w3.org/TR/CSS2/visudet.html#Computing_heights_and_margins

如你所见，这有点复杂。

As you can see, it's a bit complicated.

一些节选：

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



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



[。 。 。]



如果'height'是'auto'，高度取决于元素是否有任何块级子节点以及它是否有填充或边框：



如果它只有内联级子级，则高度是最顶端行框的顶部和最底行行的底部之间的距离。



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



[。 。 。 ]



只考虑普通流中的孩子（即，浮动框和绝对定位框被忽略，相对定位的框被认为没有它们的偏移）。 >


[。 。 。 ]



当'overflow'不计算为'visible'时，正常流中的块级未替换元素（除非overflow属性的值



如果height为auto，则高度取决于元素的后代。

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.

这篇关于CSS：如何计算块元素的高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！