jqueryを使用して余白を持つ要素の高さを計算する

Question

divのサイズを計算する必要があります。 Jqueryには便利な機能があり、outerHeight()です。それはあなたに要素のサイズを与え、余白を含める場合はouterHeight(true)と呼んでいます。

しかし、内側の要素に余白がある場合、外側の要素のサイズは変更されません。内側のものはまだ完全に内側と見なされますが。 Here's an example of what I mean。

外側のdivのouterHeightは18で、内側のdivのouterHeightは218で、テキストの18と100pxの2つの余白です。

最終的なdivの中にあるすべてのものを追跡することはできません。内に含まれるコンテンツのマージンを含め、実際の身長をどのように測定できますか？

Answer 1

それは少しハック方法ですが、あなたはこれが正しい高さを取得するための容器を強制します

#container { 
    border: 1px solid transparent; 
} 

を追加することができます。

document.write('container height= ' + $("#container").outerHeight(true) + '<br>'); 
 
document.write('stuff height= ' + $("#stuff").outerHeight(true));

#stuff { 
 
    margin: 100px; 
 
} 
 
#container { 
 
    border: 1px solid transparent; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"> 
 
    <p id="stuff"> 
 
    lorem ipsum and so on 
 
    </p> 
 
</div>

Answer 2

私はあなたのCSSを悪い習慣とみなし、それを変更します。例えば。内側divをラップして、マージンの代わりにラッパーにパディングを与えることができます。

HTML

<div id="container"> 
    <div id="wrapper"> 
    <p id="stuff"> 
     lorem ipsum and so on 
    </p> 
    </div> 
</div> 

CSS

#wrapper { 
    padding: 100px; 
} 
#stuff { 
    margin: 0; 
} 

私はあなたの例を更新：https://jsfiddle.net/h8uvyx1w/2/

それとも、パディングに、内側のdivのマージンを変更することができれば、おそらくあなたは、ラッパーを必要としません、あなたのニーズに応じて。