爲什麼這段代碼不能返回完整的文檔高度？

以下代碼應該返回文檔的全部高度，但不是。它說的高度是1023，但（通過截圖和滾動和Photoshop測量）實際高度是1804。爲什麼它錯了？我如何獲得全高？爲什麼這段代碼不能返回完整的文檔高度？

var height = Math.max( 
    document.body.scrollHeight, 
    document.body.offsetHeight, 
    document.documentElement.offsetHeight, 
    document.body.clientHeight, 
    document.documentElement.clientHeight 
);

編輯我不清楚。我想要文件高度，而不是窗口高度。通過「截屏和滾動和Photoshop」，我的意思是我做了以下內容：

拍了截圖並複製窗口的高度，把在一個新的形象
再次滾動整個窗口的高度，並採取了新的截圖並粘貼到該1號
持續，直到我不能再滾動並粘貼在剩餘的高度

這給了我文件高度。

來源

2014-09-12 Don Rhummy

**文檔**的高度不一定就是瀏覽器窗口的高度。 – Pointy 2014-09-12 22:46:13

瀏覽器窗口放大後瀏覽器是否放大？這會導致你的結果與瀏覽器不一致。 – goldfire 2014-09-12 23:27:14

如果您希望您的網頁佔據了瀏覽器窗口的整個高度，你可以添加這個CSS規則：

body { 
    min-height: 100vh; 
}

這告訴該機構應至少一樣大視瀏覽器。最喜歡當你強加給一切border-box箱尺寸是工作上的事情：

body { 
    box-sizing: border-box; 
} 

body *, body *:before, body *:after { 
    box-sizing: inherit; 
}

即填充和邊框的方式，不會造成不必要的不必要的滾動條。

來源

2014-09-12 22:47:10 Pointy

window.innerHeight; ？這聽起來像你將在瀏覽器窗口的屏幕截圖中測量的內容。

來源

2014-09-12 22:49:22

我想要文件高度。我拍了一張截圖，滾動了一下，然後繼續閱讀並繼續閱讀整個頁面。然後我將它們粘貼在一起以獲得完整的高度。我想要文件高度。 – 2014-09-12 23:06:10

文檔和窗口高度有差異。它看起來像你試圖獲得窗口的高度。嘗試使用window.innerHeight代替文檔高度。 :-)

來源

2014-09-12 22:50:09

不正確。我正在嘗試獲取文檔高度。 – 2014-09-12 23:05:14

我想你在複製粘貼屏幕時犯了錯誤。

window.onclick = function(){ 
     document.documentElement.scrollTop += window.innerHeight; 
     }

結果表明，你的函數給出相同的高度什麼的複製粘貼每個窗口的作用：

我只是用下面的腳本，以確保我在一次滾動一個頁面的高度使我自己的測試。

但是，如goldfire指出，如果您放大頁面，結果可能會不同。

來源

2014-09-12 23:50:20 Kaiido

我沒有。我創建了一個覆蓋div並將其設置爲該高度，並且不會達到完整的高度。 'jQuery（document）.height（）'更大。 – 2014-09-13 00:35:17

@DonRhummy Mine：http://jsfiddle.net/bddt3nf3/1 – Kaiido 2014-09-13 01:17:36

document本身沒有高度。您只能得到documentElement的高度，這是文檔的表示形式。所有以下方法給出相同的結果：

var h0 = document.documentElement.offsetHeight; 
var h1 = document.documentElement.getBoundingClientRect().height; 
var h2 = $(document).height();

請參閱working Fiddle here。我已經用以下方法在屏幕截圖中試過了你的方法：我在Firefox中打開比屏幕高得多的文檔，用FireShot捕捉整個頁面（可能不滾動）並將其保存爲圖像。它的像素高度與我上面用h0，h1，h2得到的完全一樣。

來源

2014-09-13 09:40:16

爲什麼這段代碼不能返回完整的文檔高度？

回答

相關問題