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

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

如您所见，这有点复杂。

一些摘录：

当“溢出”计算为“可见”时，正常流中的块级非替换元素

当“溢出”未计算为“可见”但已传播到视口时，本节也适用于正常流中的块级非替换元素。

[。 。 .]

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

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

如果它有块级子框，则高度是没有折叠边距的最顶部块级子框的顶部边框边缘与最底部块级子框的底部边框边缘之间的距离没有通过它折叠边距。

[。 。 。 ]

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

[。 。 。 ]

当“溢出”未计算为“可见”时，正常流中的块级非替换元素（除非“溢出”属性的值已传播到视口）。

如果“height”为“auto”，高度取决于元素的后代< /a>.

Answer 2

是所有浏览器都会出现这种情况还是只有一种浏览器会出现这种情况？不同浏览器的高度计算略有不同。

当页面没有像我应该的那样呈现时，我首先查看的是 HTML 是否有效。在您的代码中，您有一个结束 标记，但没有开始标记。这种类型的不匹配足以让多个浏览器崩溃。

我发生过好几次导航按钮似乎位于非常不同的位置的情况，这都是因为我的内容中的某个地方我忘记关闭

或者我在某处添加了额外的关闭元素。

Answer 3

您要附加到 DIV 还是 UL 中？它应该是一个 UL

试试这个 CSS

li{clear:both}