Question

以下代码应该返回文档的完整高度，但它不会。它表示高度为1023但是（通过屏幕截图，滚动和photoshop测量）实际高度为1804。为什么这是错的？我如何获得全高？

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

编辑我不清楚。我想要文档高度，而不是 window 高度。通过“截图和滚动和photoshop”，我的意思是我做了以下内容：

获取屏幕截图并复制窗口高度并添加新图像
再次滚动整个窗口高度并拍摄新的屏幕截图并将其粘贴到＃1
继续直到我无法再滚动并粘贴在剩余高度

这给了我文件身高。

Answer 1

如果您希望页面占据浏览器窗口的整个高度，可以添加此CSS规则：

body {
  min-height: 100vh;
}

告诉浏览器主体应该至少与视口一样大。当你对所有内容强加border-box框大小时，这样的事情效果最好：

body {
  box-sizing: border-box;
}

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

这样填充和边框不会导致不必要的不必要的滚动条。

Answer 2

window.innerHeight怎么样; ？这听起来就像你在浏览器窗口的屏幕截图中测量的那样。

Answer 3

文档和窗口高度之间存在差异。看起来你正试图获得窗户高度。请尝试使用window.innerHeight或文档高度。： - ）

Answer 4

我认为在复制粘贴屏幕时你犯了一个错误。

我只是使用以下脚本进行自己的测试，以确保我一次滚动一页高度：

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

结果显示，您的函数的高度与每个窗口复制粘贴的高度相同。

但是，正如goldfire指出的那样，如果您放大页面，结果可能会有所不同。

Answer 5

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完全相同。

为什么这段代码没有返回完整的文档高度？

5 个答案: