元素的高度为 0px

嗨，我在手风琴中有 div：

    <a href="#collapse17" data-quickedit-field-id="paragraph/17/field_section_title/en/default" class="field field--name-field-section-title field--type-string field--label-hidden accordion-toggle field--item" data-parent="#accordion" data-toggle="collapse">
  <h2><strong>Accordion Header</strong></h2>
</a>
<div id="collapse17" data-quickedit-field-id="paragraph/17/field_section/en/default" class="field field--name-field-section field--type-entity-reference-revisions field--label-hidden panel-collapse collapse field--item">
    <div class="panel-body">
        <div data-quickedit-field-id="paragraph/10/field_diagram_title/en/default" class="field field--name-field-diagram-title field--type-string field--label-hidden p-1 section-title-diagram field--item background-purple" id="div">INDEPENDENT LEARNING12</div>
    </div>
</div>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

当将鼠标悬停在检查元素上的 div 元素上时，高度为 20px。但我的jQuery：

    $('.section-title-diagram').each(function(){
  var $div = $("#div");
    var height = $div.height();
  var text = $div.text();
  console.log("Height: ", height);
  console.log("Text: ", text);
});

是 0。当我这样做时

var text = $(this).text();
console.log(text);

它确实正确吐出INDEPENDENT LEARNING12。我被困在为什么我的 div 的高度为 0。我尝试了多种方法，但无济于事。任何帮助，将不胜感激。

http://jsfiddle.net/xotu9qgj/5/