Question

在按钮上单击我想创建一个div，它是页面的整个宽度和高度。不只是可见页面，而是整个渲染文档。

到目前为止，我使用this SO anser中的Javascript计算高度：

 var B = document.body,
     H = document.documentElement,
     height;
            if (typeof document.height !== 'undefined') {
                height = document.height;
            } else {
                height = Math.max( B.scrollHeight, B.offsetHeight, H.clientHeight, H.scrollHeight, H.offsetHeight );
            }
            var overlay = document.createElement('div');
            overlay.style.position = 'absolute';
            overlay.style.width = window.innerWidth + 'px';
            overlay.style.height = height + 'px';
            overlay.style.top = window.scrollY + 'px';
            overlay.style.left = 0;

然而，这并不总是有效。有时，当我向下滚动到页面底部时，叠加层会从页面的较低位置开始，并显着延长文档的长度。有时候它运作正常，有时则不然。我知道有很多方法可以使用jQuery，但我不想使用它。

奖励积分将是在窗口调整大小时保持叠加层在整个屏幕宽度上拉伸的最佳方式....谢谢

Answer 1

您可以使用在页面右下角放置元素的方法，然后在窗口更改大小时查看偏移量

var getDimensions = document.createElement("div");
getDimensions.setAttribute("style", "visibility:hidden;position:fixed;bottom:0px;right:0px;");
document.getElementsByTagName("body")[0].appendChild(getDimensions);
var Width = getDimensions.offsetLeft;
var Height = getDimensions.offsetTop;
window.onresize = function(){
 Width = getDimensions.offsetLeft;
 Height = getDimensions.offsetTop;
};

Answer 2

使用跨浏览器/设备方式获取宽度：

function _getActualWidth()
{
    _actualWidth = window.innerWidth ||
                   document.documentElement.clientWidth ||
                   document.body.clientWidth ||
                   document.body.offsetWidth;

    return _actualWidth;
}

要获得高度，请将高度替换为高度。您可以在发出调整大小事件时调用这些函数，然后将新的宽度和高度设置为覆盖对象。

Answer 3

为什么不使用CSS viewport units而不是尝试计算视口宽度和高度？

        overlay.style.width = '100vw';
        overlay.style.height = '100vh';

如何获取文档的整个宽度和高度（没有jQuery）

3 个答案: