CSSで高さが設定されていないdivの高さを取得

Question

要素にCSS高さのルールが設定されていない場合、要素の高さを取得する方法はありますか。CSSルールが必要なため、.height（）jQueryメソッドを使用できません。最初に設定しますか？高さを得る他の方法はありますか？

Answer 1

jQuery .heightは要素の高さを返します。計算された高さを決定するので、CSS定義は必要ありません。

DEMO

あなたが必要なものに基づいて.height()、.innerHeight()またはouterHeight()を使用することができます。

.height()は - 要素の高さは、パディング、境界及びマージンを除外返します。

.innerHeight() - 要素の高さを返します。埋め込みは含まれますが、境界線と余白は除外されます。

.outerHeight() - 境界線を含むdivの高さを返しますが、マージンは除きます。

.outerHeight(true) - 余白を含むdivの高さを返します。

ライブデモのコードスニペットを確認してください。 :)

$(function() { 
 
    var $heightTest = $('#heightTest'); 
 
    $heightTest.html('Div style set as "height: 180px; padding: 10px; margin: 10px; border: 2px solid blue;"') 
 
    .append('<p>Height (.height() returns) : ' + $heightTest.height() + ' [Just Height]</p>') 
 
    .append('<p>Inner Height (.innerHeight() returns): ' + $heightTest.innerHeight() + ' [Height + Padding (without border)]</p>') 
 
    .append('<p>Outer Height (.outerHeight() returns): ' + $heightTest.outerHeight() + ' [Height + Padding + Border]</p>') 
 
    .append('<p>Outer Height (.outerHeight(true) returns): ' + $heightTest.outerHeight(true) + ' [Height + Padding + Border + Margin]</p>') 
 
});

div { font-size: 0.9em; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="heightTest" style="height: 150px; padding: 10px; margin: 10px; border: 2px solid blue; overflow: hidden; "> 
 
</div>

Answer 2

ケース他でちょうどノートでは同じ問題を抱えています。

私は同じ問題を抱えていて、別の答えが見つかりました。私は高さだのdivの高さは、その内容によって決定され得ることがwindow.load、またはwindow.scrollないdocument.ready上で開始する必要があることを見つけそうでない場合、私は奇妙な高さ/小さな高さを取得、すなわち前画像が読み込まれました。私もouterHeight（）を使用しました。

var currentHeight = 0; 
$(window).load(function() { 
    //get the natural page height -set it in variable above. 

    currentHeight = $('#js_content_container').outerHeight(); 

    console.log("set current height on load = " + currentHeight) 
    console.log("content height function (should be 374) = " + contentHeight()); 

}); 

Answer 3

もdiv要素が現在見え DOMとに追加されていることを確認します。

Answer 4

jQueryでこれを行うことができます。すべてのオプション.height()、.innerHeight()または.outerHeight()を試してください。

$('document').ready(function() { 
    $('#right_div').css({'height': $('#left_div').innerHeight()}); 
}); 

例スクリーンショット

この情報がお役に立てば幸いです。ありがとう!!