Question

某些网站（例如此处的stackoverflow.com）设置了height: 100%和/或width: 100%元素的<html>和/或<body>（出于某种原因，我不知道不明白。 CSS默认为文档中的所有元素设置overflow: visible（afaik），因此与父元素边界重叠的子元素不会被截断，如果它们离开视口，浏览器可能会显示滚动条。到目前为止，非常好。

但是，如果为height: 100%和html这两个元素设置了body，那么如何找出整个文档的实际（完整）大小呢？在这种情况下，document.documentElement.getBoundingClientRect()和document.body.getBoundingClientRect()将仅返回可见视口的高度。

尝试一下：转到https://stackoverflow.com/并在控制台中执行以下代码：

var de = document.documentElement;
var b = document.body;

console.log('Before:');
console.log(de.getBoundingClientRect().height);  // or de.offsetHeight
console.log(b.getBoundingClientRect().height);  // or b.offsetHeight

de.style.height = '100%';
b.style.height = '100%';

console.log('After:');
console.log(de.getBoundingClientRect().height);  // or de.offsetHeight
console.log(b.getBoundingClientRect().height);  // or b.offsetHeight

就我而言，输出是：

Before:
638
8352.2333984375
After:
638
638

第一个“638”是因为在stackoverflow.com上，<html>元素CSS height属性已经设置为100％，就像我上面写的那样。但是垂直滚动条仍然可见，页面可以向下滚动。

因此，如果两个元素的高度都设置为100％，我必须找到其他选项才能找到整个文档的实际大小？ offsetHeight返回相同的值，因此无法使用它（它也不会考虑任何CSS转换，如倾斜）。我能想到的唯一方法是遍历文档中的所有元素，获取底边的绝对（相对于文档边界）位置并取最高值。也许是这样的：

(function() {
    var getAbsolutePos = function(elm) {
        var pos = {x: 0, y: 0};

        if (elm.offsetParent) {
            do {
                pos.x += elm.offsetLeft;
                pos.y += elm.offsetTop;
            } while (elm = elm.offsetParent);
        }

        return pos;
    };

    var e = document.querySelectorAll("*");
    var btm, docHeight = 0;
    for (var i=0; i < e.length; ++i)
    {
        btm = getAbsolutePos(e[i]).y + e[i].offsetHeight;
        if (btm > docHeight) {
            docHeight = btm;
        }
    }

    console.log('Page height: ' + docHeight);
})();

// Output: "Page height: 8416"

但这看起来很脏，我猜这可能是资源密集型的（取决于元素数），尤其是当这个计算发生在例如onMouseMove事件中时。在移动设备上更糟糕的是，功耗会提高。

还有其他更有效的方法可以使用纯JavaScript查找文档的完整大小吗？

Answer 1

查看本文关于视口，设备和文档大小https://www.kirupa.com/html5/viewport_device_document_size.htm.In的命令，以获取它使用的真实文档大小document.body.clientWidth和document.body.clientHeight。在https://stackoverflow.com/进行了尝试，我得到了与8416相同的结果吗？

使用JavaScript

1 个答案: