获取没有在CSS中设置高度的div的高度

如果没有为元素设置CSS高度规则，我无法使用.height()jQuery方法，因为它首先需要CSS规则集，那么有什么方法可以获取元素的高度？还有其他方法可以获取高度吗？

jQuery .height将返回元素的高度。它不需要CSS定义，因为它确定了计算的高度。

演示

您可以使用.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>

如果其他人有同样的问题，请注意。

我遇到了同样的问题，却找到了不同的答案。我发现获取由其内容决定的div的高度需要在window.load或window.scroll而不是document.ready上启动。否则，我将得到奇数个高度/较小的高度，即在图像加载之前。我还使用了externalHeight（）。

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());   

});

可以在jQuery中做到这一点。尝试所有选项.height()，.innerHeight()或.outerHeight()。

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

屏幕截图示例

希望这可以帮助。谢谢！！

还要确保div当前已附加到DOM并可见。