jQuery .height（）輸出與.scrollHeight相同的值與溢價：自動（IE8）

繞過許多其他問題後，我還沒有找到一個答案，解決了我的問題。jQuery .height（）輸出與.scrollHeight相同的值與溢價：自動（IE8）

我正在編寫腳本來確定div是否溢出。但是當試圖通過jQuery.height(),jQuery.innerHeight()或JavaScripts offsetHeight檢索可見高度時。給予整個值div（包括溢出的部分），即：與scrollHeight相同的值。

包含div風格：

{ 
    overflow-x: hidden; 
    overflow-y: auto; 
    width: 73%; 
    bottom: 0px; 
    float: left; 
    height: 100%; 
    top: 0px; 
}

我上的jsfiddle創建一個模擬了場景：http://jsfiddle.net/Lukedturnbull/L2bxmszv/3/（請提前預覽屏幕較小創建滾動條）

來源

2014-09-01 Luke Turnbull

您使用Jquery的哪個'div'來獲得'height'？容器一個，還是內部的？ – LcSalazar 2014-09-01 16:12:03

容器一個，裏面有幾個內部的div，它們是從數據庫中產生的。 – 2014-09-01 16:27:07

一切似乎很好，jQuery.height()和jQuery.innerHeight()與溢出屬性無關。他們會回到高處，而不僅僅是可見的部分。

如果你想知道內容高度，你必須使用scrollHeight。這scrollHeight是一個普通的JavaScript屬性您不必使用jQuery

document.getElementById("wrapper").scrollHeight;

或者你可以使用jQuery選擇

見工作的jsfiddle：http://jsfiddle.net/scgz7an5/1/

注意

$('#wrapper').scrollHeight;

返回undefined。

UPDATE

你忘了浮動元素中最重要的組成部分。你忘了清除它們。

看看這個jsfiddle，是對你的編輯，但是清除了浮動元素。在那裏您會看到scrollHeight和jQuery.height()的不同值。看到.structureContent是有滾動條的，不是.content也不是.width100。

.structureContent有overflow:auto您看到的滾動條來自它。

http://jsfiddle.net/L2bxmszv/5/

我加入這個類來清除浮動元素。

.clearfix:before, 
.clearfix:after, { 
    content: '\0020'; 
    display: block; 
    overflow: hidden; 
    visibility: hidden; 
    width: 0; 
    height: 0; } 
.clearfix:after { 
    clear: both; } 
.clearfix { 
    zoom: 1; }

輸出是這樣的：

.content 
324 for scrollHeight 
324 for clientHeight 
324 for jQuery.height() 
.structureContent 
324 for scrollHeight 
276 for clientHeight 
276 for jQuery.height()

查看關於浮動元素和他們在這裏清除了一大篇：http://css-tricks.com/all-about-floats/

來源

2014-09-01 16:41:06

啊，對不起。我似乎感到困惑。我已經嘗試了所有以下顯示的scrollHeight方法，它們返回的值與.height（）ext相同。 – 2014-09-01 16:45:12

你試過了我給你的jsfiddle嗎？打開控制檯並查看它們返回的值，scrollHeight返回的值不是高度 – 2014-09-01 17:44:29

是的，它工作正常，它似乎並不適用於特定的div。 – 2014-09-01 19:19:48

現在我已經找到了我的問題的解決方案，雖然我不完全理解爲什麼這樣做。

這不是HTML和代碼我寫了，我只是寫一個修復程序，看看滾動條是否出現。但是我發現獲得容器父級的ScrollHeight和Height可以解決我的問題。比較一下，看看scrollHeight是否大於我允許我解決問題的高度。

來源

2014-09-02 12:12:54

請參閱我的更新，請參閱您的問題的解決方案的解釋。用你的jsfiddle例子，我可以知道你的案例失敗的原因。 – 2014-09-02 15:42:06

乾杯的人，不幸的是，我不能真正觸及任何HTML元素，因爲它可能會混淆其他頁面！但是，謝謝你的信息，它現在正在工作！非常感謝。 – 2014-09-02 15:55:05

如果您可以在CSS文件中添加一個類，然後添加該類並且不更改HTML，您可以使用'$（'。structureContent'）。addClass（'clearfix'）;'通過Javascript將該類添加到您的元素中。你可以這樣解決它。 – 2014-09-02 16:10:00

您看到的滾動條實際上是.structureContent元素，而不是.content。這就是爲什麼.content返回所有相同的值。 .content未被截斷。

來源

2014-09-02 15:58:37

jQuery .height（）輸出與.scrollHeight相同的值與溢價：自動（IE8）

回答

相關問題