一种解决方法是在你想要获取高度的元素外面创建一个父div，应用高度为“0”并隐藏任何溢出。接下来，获取子元素的高度并删除父元素的overflow属性。

Var height = $("#child").height(); //在这里做点什么 $(" #父母”).append(高度).removeClass(“overflow-y-hidden”); .overflow-y-hidden { 高度:0 px; overflow-y:隐藏; ｝ < script src = " https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js " > < /脚本> <div id="parent" class="overflow-y-hidden"> < div id = "孩子" > 这是一些我想要得到高度的内容! < / div > < / div >

在我的环境中，我也有一个隐藏的元素阻止我获取高度值，但它不是元素本身，而是它的父元素之一……所以我只是检查了我的一个插件，看看它是否被隐藏，否则就找到最近的隐藏元素。这里有一个例子:

var $content = $('.content'),
    contentHeight = $content.height(),
    contentWidth = $content.width(),
    $closestHidden,
    styleAttrValue,
    limit = 20; //failsafe

if (!contentHeight) {
    $closestHidden = $content;
    //if the main element itself isn't hidden then roll through the parents
    if ($closestHidden.css('display') !== 'none') { 
        while ($closestHidden.css('display') !== 'none' && $closestHidden.size() && limit) {
            $closestHidden = $closestHidden.parent().closest(':hidden');
            limit--;
        }
    }
    styleAttrValue = $closestHidden.attr('style');
    $closestHidden.css({
        position:   'absolute',
        visibility: 'hidden',
        display:    'block'
    });
    contentHeight = $content.height();
    contentWidth = $content.width();

    if (styleAttrValue) {
        $closestHidden.attr('style',styleAttrValue);
    } else {
        $closestHidden.removeAttr('style');
    }
}

事实上，这是Nick, Gregory和Eyelidlessness的响应的合并，让您使用Gregory的改进方法，但使用这两种方法，以防在style属性中应该有您想要放回去的东西，并寻找父元素。

我对我的解决方案唯一的不满是，通过父节点的循环不是完全有效的。

以尼克的回答为基础:

$("#myDiv").css({'position':'absolute','visibility':'hidden', 'display':'block'});
optionHeight = $("#myDiv").height();
$("#myDiv").css({'position':'static','visibility':'visible', 'display':'none'});

我发现这样做更好:

$("#myDiv").css({'position':'absolute','visibility':'hidden', 'display':'block'});
optionHeight = $("#myDiv").height();
$("#myDiv").removeAttr('style');

设置CSS属性将内联插入它们，这将覆盖你在CSS文件中的任何其他属性。通过删除HTML元素上的style属性，一切恢复正常，仍然是隐藏的，因为它最初是隐藏的。

根据定义，元素只有在可见时才有高度。

只是好奇:为什么需要隐藏元素的高度?

一种替代方法是通过将元素放在某种覆盖层的后面(使用z-index)来有效地隐藏元素。

我在获取隐藏元素宽度时遇到了同样的问题，所以我写了这个插件调用jQuery Actual来修复它。而不是使用

$('#some-element').height();

use

$('#some-element').actual('height');

会给你隐藏元素的正确值或者元素有一个隐藏的父元素。

完整的文件请见这里。页面中还包括一个演示。

希望这对你有所帮助:)

遵循Nick Craver的解决方案，设置元素的可见性可以让它获得准确的尺寸。我经常用这个方法。然而，不得不手动重置样式，我发现这很麻烦，考虑到修改元素的初始位置/显示在我的css通过开发，我经常忘记更新相关的javascript代码。下面的代码不会重置每个say的样式，而是删除javascript添加的内联样式:

$("#myDiv")
.css({
    position:   'absolute',
    visibility: 'hidden',
    display:    'block'
});

optionHeight = $("#myDiv").height();
optionWidth = $("#myDiv").width();

$("#myDiv").attr('style', '');

这里唯一的假设是不能有其他内联样式，否则它们也会被删除。不过，这里的好处是元素的样式将返回到css样式表中的样式。因此，您可以将其写成一个函数，其中传递一个元素，并返回一个高度或宽度。

我发现通过js设置内联样式的另一个问题是，当通过css3处理过渡时，你被迫调整样式规则的权重，使其比内联样式更强，这有时会令人沮丧。