1. 首页
  2. 问答
  3. jQuery - 获取绝对div的内容高度

jQuery - 获取绝对div的内容高度

2016-12-05 79 views
0

也有类似的问题，但没有答案帮助。jQuery - 获取绝对div的内容高度

我有一个绝对的div与一些内容，我想得到这个div的“真实”高度（而不是可见部分的高度）。我想这是这个div的所有孩子的高度的总和。

https://jsfiddle.net/h7mamr4s/ - 正如你所看到的height(),outerHeight()和innerHeight()方法只返回可见div的高度。 “真实”的高度应该更大。

有没有办法用纯JavaScript或jQuery做到这一点？我使用jQuery 1.11.2（不，由于某些原因，我无法更新）。

console.log("height(): " + $("#content").height()); 
 
console.log("outerHeight(): " + $("#content").outerHeight()); 
 
console.log("innerHeight(): " + $("#content").innerHeight());
#content { 
 
    border: 1px solid #000; 
 
    margin-top: 35px; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    overflow: auto; 
 
    width: 100%; 
 
    z-index: 1; 
 
}
<script src="https://code.jquery.com/jquery-1.11.2.js"></script> 
 

 
<div id="content"> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
    <span>smth</span><br /> 
 
</div>

来源

2016-12-05 coolguy

+0

你怎么知道真正的高度是什么？ – AthMav

+1

刚试过这个'$（“＃content”）[0] .scrollHeight'并且适用于我。从这个答案http://stackoverflow.com/questions/2522579/how-do-i-get-the-real-height-of-a-overflow-hidden-or-overflow-scroll-div – onzinsky

+0

谢谢，它帮助。没有注意到这一个 – coolguy

回答

1

试试这个 document.getElementById("content").scrollHeight

来源

2016-12-05 11:51:47 abhi110892

相关问题

 相关问题