2010-12-03 19 views
2

私はいくつかのコメントを保持するdiv要素を使用します。私は基本的にはそうのようなより多くのコメントを追加するには、jQueryのを使用します。CSS:ブロック要素の高さはどのように計算されますか?

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

問題は、全体のdivの高さが適切に更新されますdoesntのように見えるということです!コメントを追加しているうちにdivの高さが増えますが、コメントが足りないとオーバーフローする傾向があります。

実際に要素の高さはどのように計算されますか?

+2

どのようにこのCSSを試してすべきですか?おそらくあなたのマークアップも検証するでしょう。 – casablanca

答えて

3

http://www.w3.org/TR/CSS2/visudet.html#Computing_heights_and_margins

あなたが見ることができるように、それは少し複雑です。

一部抜粋:正常な流れで

ブロックレベル非置換要素「オーバーフロー」はこのセクションではまた、非置換要素レベルをブロックするために適用さ

「可視」に計算「オーバーフロー」が「可視」に計算されず、ビューポートに伝播されたときの通常のフロー。

[。 。 。]

「高さは」「自動」である場合には、高さは要素が任意のブロックレベルの子供を持っているかどうかに依存し、それはパディングやボーダーを持っているかどうか:

それが唯一のインラインレベルの子を持つ場合には、高さは一番上の線ボックスの上端と一番下の線ボックスの下端の間の距離です。

ブロックレベルの子がある場合、その高さは、マージンが折りたたまれていない一番上のブロックレベルの子ボックスの上端と、一番下のブロックレベルの子境界の下端との距離です。マージンが崩壊していない高レベルの子ボックス。

[。 。 。 ]

通常フローの子のみが考慮されます(つまり、フローティングボックスと絶対配置されたボックスは無視され、相対配置されたボックスはオフセットなしで考慮されます)。

[。 。 。 ]

'オーバーフロー'プロパティの値がビューポートに伝播されている場合を除き、 'オーバーフロー'が '可視'に計算されない場合、ブロックレベルの置換されていない要素です。

'height'が 'auto'の場合、 the height depends on the element's descendantsです。
+0

なぜそんなに複雑ですか? – juanpastas

1

これはすべてのブラウザで起こっているのですか、それとも1つだけですか?高さの計算はブラウザーによって微妙に異なります。

ページがレンダリングされていないときは、まずHTMLが有効かどうかを調べる必要があります。あなたのコードでは、開封済みの</a>タグがあります。このタイプの不一致は、いくつかのブラウザをスローするのに十分です。

私のコンテンツのどこかで、<div>を閉じるのを忘れていたか、どこかに余分な終了要素を追加したため、ナビゲーションボタンが全く異なる場所にあるように見えました。 「計算要素の高さである方法」を、いくつかの情報はここで見つけることができるの一般的な質問については

0

あなたはDIVまたはULに追加していますか? UL

あなたのDIVのCSSの投稿について

関連する問題