jQuery 在css中没有设置高度的情况下获取div的高度

Get height of div with no height set in css

提问by Samuel Lopez

Is there any way to get the height of an element if there is no CSS height rule set for the element I cannot use .height()jQuery method because it need a CSS rule set first? Is there any other way to get the height?

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

回答by Selvakumar Arumugam

jQuery .heightwill return you the height of the element. It doesn't need CSS definition as it determines the computed height.

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

DEMO

演示

You can use .height(), .innerHeight()or outerHeight()based on what you need.

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

.height()- returns the height of element excludes padding, border and margin.

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

.innerHeight()- returns the height of element includes padding but excludes border and margin.

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

.outerHeight()- returns the height of the div including border but excludes margin.

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

.outerHeight(true)- returns the height of the div including margin.

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

Check below code snippet for live demo. :)

检查下面的代码片段进行现场演示。:)

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

回答by Iamsamstimpson

Just a note in case others have the same problem.

只是一个说明，以防其他人遇到同样的问题。

I had the same problem and found a different answer. I found that getting the height of a div that's height is determined by its contents needs to be initiated on window.load, or window.scrollnot document.readyotherwise i get odd heights/smaller heights, i.e before the images have loaded. I also used outerHeight().

我遇到了同样的问题并找到了不同的答案。我发现获取高度由其内容决定的 div 的高度需要在window.load或window.scrollnot 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());   

});

回答by Madan Sapkota

Can do this in jQuery. Try all options .height(), .innerHeight()or .outerHeight().

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

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

Example Screenshot

示例截图

Hope this helps. Thanks!!

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

回答by Tom Scholes

Also make sure the div is currently appended to the DOMand visible.

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