1. 首頁
  2. 問答
  3. jQuery - 獲取絕對div的內容高度

jQuery - 獲取絕對div的內容高度

2016-12-05 31 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

相關問題

 相關問題