2010-12-03 69 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