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

Question

如果没有为我不能使用的元素设置CSS高度规则，有没有办法获得元素的高度。高度（）jQuery方法，因为它需要先设置CSS规则？有没有其他方法可以达到高度？

Answer 1

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

DEMO

您可以根据需要使用.height()，.innerHeight()或outerHeight()。

.height() - 返回元素的高度，不包括填充，边框和边距。

.innerHeight() - 返回元素的高度，包括填充，但不包括边框和边距。

.outerHeight() - 返回div的高度，包括边框，但不包括边距。

.outerHeight(true) - 返回div的高度，包括margin。

检查以下代码段以获取实时演示。 ：）

$(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

可以在 jQuery 中执行此操作。尝试所有选项.height()，.innerHeight()或.outerHeight()。

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

示例屏幕截图

希望这会有所帮助。谢谢！

Answer 4

还要确保 div目前已附加到DOM 和可见。