2010-12-03 49 views
2

我使用包含一些注释的div-Element。我基本上使用jQuery添加更多注释,像这样:CSS:块元素的高度是如何计算的?

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

的问题是,它似乎整个div的高度犯规得到正确更新! div的高度增加,同时我增加了更多评论,但还不够,所以在一些评论之后,它往往会溢出。

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

+2

如何张贴CSS为您DIV?也可能验证你的标记。 – casablanca 2010-12-03 03:14:50

回答

3

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

正如你可以看到,这是一个有点复杂。

一些摘录:

“溢出”时块级非替换在正常流动的元素计算到“可见的”

此部分也适用于块级非替换元件在当'溢出'不计算为'可见'但已传播到视口时的正常流程。

[。 。 ]

如果“高”是“汽车”,高度取决于该元素是否有任何块级儿童以及是否有填充或边框:

如果只有行内儿童,高度是最顶端线框顶部和最底部线框底部之间的距离。

如果它具有块级别的子项,那么高度是没有通过它折叠边距的最顶级块级子框的顶部边框边缘与最底部块的底部边框边缘之间的距离,没有边缘的高级子框通过它倒塌。

[。 。 。 ]

只考虑正常流程中的儿童(即浮动框和绝对定位的框被忽略,相对定位的框被认为没有它们的偏移量)。

[。 。 。 ]

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

如果'高度'是'自动', the height depends on the element's descendants
+0

为什么这么复杂? – juanpastas 2016-05-14 20:34:43

1

这是发生在所有浏览器还是只有一个?浏览器之间的高度计算巧妙地不同。

当页面没有像我一样渲染时,我首先看的是HTML是否有效。在您的代码中,您有一个关闭</a>标记,但没有开始标记。这种不匹配足以抛出几个浏览器。

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

0

您是否追加到DIV或UL?这应该是一个UL

试试这个CSS