如何获得div的高度'；jQuery的全部内容是什么？

我正在尝试创建自己的滚动条。我已经尝试了大多数jquery滚动条插件，但它们似乎都不适合我，所以我决定创建自己的插件。我有一个可滚动内容的溢出区。如果我能够计算出可滚动内容区域的高度，我就可以让滚动条工作。我尝试了.scrollHeight（），但浏览器甚至都无法识别它。溢流区有一个固定的位置

元素。如前所述，scrollHeight

是一个属性，而不是一个函数。如上所述，scrollHeight属性仅在IE8之后受支持。如果在此之前需要它工作，请临时将CSS

溢出

和

高度

设置为

自动

，这将使div达到所需的最大高度。然后获取高度，并将属性更改回原来的状态。

对于函数，而不是函数：

元素滚动视图的高度；它包括元素填充，但不包括其边距

鉴于此：

<div id="x" style="height: 100px; overflow: hidden;">
    <div style="height: 200px;">
        pancakes
    </div>
</div>

---

例如：（在JavaScript控制台打开的情况下运行）。

您可以使用

.outerHeight（）

获得它

有时，它将返回

0

。为了获得最佳结果，您可以在

div

的就绪事件中调用它

为安全起见，不应将

div

的高度设置为

x

。您可以保持其高度

auto

，以使内容以正确的高度正确填充

$('#x').ready( function(){
// alerts the height in pixels
alert($('#x').outerHeight());
})

---

你可以找到一篇详细的帖子。

如果你能帮上忙，请不要使用.scrollHeight

.scrollHeight在某些情况下（尤其是在滚动时）在不同浏览器中不会产生相同的结果

例如：

<div id='outer' style='width:100px; height:350px; overflow-y:hidden;'>
<div style='width:100px; height:150px;'></div>
<div style='width:100px; height:150px;'></div>
<div style='width:100px; height:150px;'></div>
<div style='width:100px; height:150px;'></div>
<div style='width:100px; height:150px;'></div>
<div style='width:100px; height:150px;'></div>
</div>

我选择这三种浏览器的原因是，在某些情况下，这三种浏览器可能在.scrollHeight的值上存在分歧。我在制作自己的滚动窗格时遇到了这个问题。希望这对某人有所帮助。

我们也可以使用-

$('#x').prop('scrollHeight') <!-- Height -->
$('#x').prop('scrollWidth')  <!-- Width -->

$（'#x'）.prop（'scrollHeight'））
$（'#x'）.prop（'scrollWidth'））

使用

scrollHeight

不仅有问题，而且在容器具有硬编码高度时也不起作用（这可能是大多数情况下的情况，因为您不需要执行

container.height（）

本身就可以获得内容高度）

@当您可以临时更改容器高度/使用硬编码高度时，shazboticus-s-shazbot解决方案是很好的

另一种解决办法是：

$（“#外部”）
//获取数组格式的子元素，因为我们将把它们减少为一个数字
.contents（）.toArray（）
//过滤掉文本和注释节点，只允许标记
.filter（el=>el.nodeType==1）
//把所有孩子的身高加起来
.reduce（（累加器，el）=>$（el）.outerHeight（真）+累加器，0）我读到的每一篇关于scrollHeight的文章，都没有人说过需要[0]，scrollHeight不是一个函数。我假设，在尝试了这个之后，我得到了正确的高度。在实现滚动条的计算之前，我不会知道。但是，你得到了要点。谢谢@mtlca401:您需要使用
[0]
从jQuery对象中提取底层DOM对象，这与
document.getElementById（）
将提供的内容相同。你也可以使用jQuery的函数。我在chrome中得到4260px，在firefox中得到4300px，但我想这可能是因为填充？这是正确的吗？@mtlca401:可能有很多东西（边距、填充、行高、字体呈现差异等等），~1%的差异没有那么大。如果您想要实际的scrollTop高度，您需要scrollLength=$（'#x'）[0]。scrollHeight-$（'#x'）.height（）；说IE8是它支持的最低版本，所以应该是“在IE7之后”或“IE8及更高版本”，因为scrollHeight是一个DOM属性，您不应该使用
$（“#outer”）.get（0）.scrollHeight
？
$('#outer').css("height", "auto");
var outerContentsHeight = $('#outer').height();
$('#outer').css("height", "350px");

console.log(outerContentsHeight); //Should get 900px in these 3 browsers

$('#x').prop('scrollHeight') <!-- Height -->
$('#x').prop('scrollWidth')  <!-- Width -->