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

Question

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

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

问题是，似乎整个div的高度都没有得到正确更新！

当我添加更多评论时，div的高度会增加，但还不够，所以在评论之后它会溢出。

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

3 个答案:

答案 0 :(得分：3)

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

如你所见，它有点复杂。

一些摘录：

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

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

[ 。 ]

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

如果它只有内嵌级别的子项，则高度是最顶部的行框顶部与最下面的行框底部之间的距离。

如果它具有块级子级，则高度是最顶层块级子框的顶部边框边缘之间的距离，该边框边缘没有通过它折叠的边距，以及最底部块级子框的底部边缘边缘通过它没有边缘崩溃。

[ 。 。 ]

仅考虑正常流量中的子项（即，忽略浮动框和绝对定位的框，并且考虑相对定位的框而没有它们的偏移）。

[ 。 。 ]

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

如果'height'为'auto'，the height depends on the element's descendants

答案 1 :(得分：1)

这是在所有浏览器中发生还是只发生一次？浏览器之间的高度计算略有不同。

当页面没有呈现时，我首先看到的是HTML是否有效。在您的代码中，您有一个没有开放标记的结束</a>标记。这种类型的不匹配足以让几个浏览器关闭。

我发生了好几次导航按钮似乎位于一个非常不同的位置，因为在我的内容中某处我忘了关闭<div>或者我在某处添加了一个额外的关闭元素。

答案 2 :(得分：0)

您是在追加DIV还是UL？它应该是UL

试试这个CSS

li{clear:both}

Answer 1

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

如你所见，它有点复杂。

一些摘录：

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

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

[ 。 ]

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

如果它只有内嵌级别的子项，则高度是最顶部的行框顶部与最下面的行框底部之间的距离。

如果它具有块级子级，则高度是最顶层块级子框的顶部边框边缘之间的距离，该边框边缘没有通过它折叠的边距，以及最底部块级子框的底部边缘边缘通过它没有边缘崩溃。

[ 。 。 ]

仅考虑正常流量中的子项（即，忽略浮动框和绝对定位的框，并且考虑相对定位的框而没有它们的偏移）。

[ 。 。 ]

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

如果'height'为'auto'，the height depends on the element's descendants

Answer 2

这是在所有浏览器中发生还是只发生一次？浏览器之间的高度计算略有不同。

当页面没有呈现时，我首先看到的是HTML是否有效。在您的代码中，您有一个没有开放标记的结束</a>标记。这种类型的不匹配足以让几个浏览器关闭。

我发生了好几次导航按钮似乎位于一个非常不同的位置，因为在我的内容中某处我忘了关闭<div>或者我在某处添加了一个额外的关闭元素。

Answer 3

您是在追加DIV还是UL？它应该是UL

试试这个CSS

li{clear:both}