4

divのscrollHeightを取得しようとしましたが、正しく取得していますが、その特定のdivのcssにheightプロパティを追加すると、異なる値が取得されます。

フィドルを実行するだけで、scrollheightプロパティのコンソール値が268（すべての子の高さの合計に等しい）に等しいことがわかります。

しかし、cssに高さの値（たとえばheight：50px;）を追加すると、出力は252になります（違いは最後の子要素のマージンだと思います）。

不一致がある理由を誰かが答えることができますか？

編集 質問が明確ではなかったので、私はidを言い換えました。親divの高さを指定すると、スクロールの高さが252ピクセルになりますが、高さを指定しないか「自動」に設定すると、268ピクセルになります。後者の場合もマージンが崩れない理由を知りたかっただけですか？余白が折りたたまれていることは心配していませんが、これら2つのシナリオでスクロールの高さが異なる理由を知りたいだけですか？

以下の答えは完全に問題ありません。ただし、javascriptを使用して正しいscrollHeightも取得しました（最後の子の下マージンを含む）

var h = $(div).height();
$(div).height("auto");
var ch = $(div)[0].scrollHeight;
$(div).height(h);
4

1 に答える 1

9

あなたの質問を読み直した後、私はあなたが何か他のことを求めていることに気づきました。しかし、それは私が以前に投稿したのと同じ答えです。

全高は に正しく計算され254pxます。この値よりも小さい高さを明示的に設定すると、ブラウザーは のみを計算し238pxます。これは、あなたの推測のよう16pxに、下部にマージンがなく、「マージンの崩壊」が原因で発生します。次の規則により、最後のマージンは破棄されます。

親と最初/最後の子

折りたたまれたマージンは、親の外に出ます。

したがって、それを修正するには、次を使用できます。

overflow: hidden;

または、代わりにパディングを使用することもできます (このパディングはマージン動作を「再構築」します。説明については以下を参照してください)。

p {
    padding: 8px;
}
p:first-child, p:last-child {
    padding-top: 16px;
}

詳細については、MDN: Margin collapsing を参照してください。

編集：あなたの質問を読み直す前に、これが私の最初の答えでした。誰かが同様の質問をしており、同じ解決策につながる場合に備えて、ここに残します。

これで解決: 兄弟の高さ/余白が期待どおりにならないのはなぜですか?

あなたの身長は正しく計算されます。あなたが直面しているのはと呼ばれるものです：マージンの崩壊。

これは、すべてのタグの上マージンと下マージン<p>が「マージ」されていることを意味します。7 行の場合、次のことを意味します。

  • 18px は 1 行の高さです
  • 上下に16pxの余白
  • 最初の要素の上部と最後の要素の下部は期待どおりに表示されます
  • 他のすべての余白は折りたたまれています

これにより、次の結果が得られます。

  7 * 18px (height)
+ 6 * 16px (margins in-between)
+ 2 * 16px (margin top and bottom)
= 254px (exact the value calculated by the browser)

padding代わりに使用することで、これを簡単に回避できます。

詳細については、MDN: Margin collapsing を参照してください。

于 2012-07-22T23:53:54.643 に答える