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

Question

我使用一个div元素来容纳一些评论。基本上，我使用jQuery添加更多的评论，如下：

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

的高度好像没有得到正确的更新！虽然我添加了更多的评论，但

的高度仍然不够，因此在一些评论之后会溢出。

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

- Pascal Klein

---

可以发一下你DIV的CSS代码吗？还有最好验证一下你的标记语言。 - casablanca

Answer 1

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

正如您所见，这有点复杂。

以下是一些摘录： 当'overflow'计算为'visible'时，正常流中的块级非替换元素

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

[...]

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

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

如果它有块级子元素，则高度是最顶部的块级子元素框的顶部边缘与最底部的块级子元素框的底部边缘之间的距离，且这些子元素没有折叠的外边距。

[...]

仅考虑正常流中的子元素（即忽略浮动框和绝对定位框，并考虑相对定位框而不考虑其偏移量）。

[...]

当'overflow'未计算为'visible'时（除非'overflow'属性的值已传播到视口），正常流中的块级非替换元素

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

- Tim Goodman

Answer 2

这是所有浏览器中都发生的还是只有一个浏览器？不同浏览器之间高度计算微妙地不同。

当页面没有像应该一样呈现时，我首先查看的是HTML是否有效。在你的代码中，你有一个没有开放标签的闭合</a>标签。这种不匹配足以使一些浏览器出错。

我已经遇到过几次导航按钮似乎在非常不同的位置的情况，所有这些都是因为在我的内容中忘记关闭一个<div>或者在某个地方添加了额外的关闭元素。

- Berin Loritsch

Answer 3

你是在向 DIV 还是 UL 添加内容？应该是 UL。

尝试使用这个 CSS。

li{clear:both}

- Ives.me