限制

Question

请注意，我不询问如何制作div大小的“窗口”或“视口”，其中存在大量现有问题。

我有一个高度和宽度的网页，我想添加一个空的顶级div（即，不包含页面其余部分的div），其大小完全等于页面的高度和宽度。在实践中，我还希望它至少视口的大小。

我知道我可以在JavaScript中一次性计算高度和宽度：

var height = Math.max(document.body.scrollHeight,
                      document.documentElement.clientHeight);
var width = Math.max(document.body.scrollWidth,
                     document.documentElement.clientWidth);

但是这个值可以根据图像加载，或AJAX，或者页面中正在发生的任何其他动态内容而改变。我想要一些方法来锁定整个页面大小的div的大小，以便动态和按需调整大小。

我尝试过以下内容：

function resetFakeBg() {
  // Need to reset the fake background to notice if the page shrank.
  fakeBg.style.height = 0;
  fakeBg.style.width = 0;
  // Get the full page size.
  var pageHeight = Math.max(document.body.scrollHeight,
                             document.documentElement.clientHeight);
  var pageWidth = Math.max(document.body.scrollWidth,
                            document.documentElement.clientWidth);
  // Reset the fake background to the full page size.
  fakeBg.style.height = pageHeight + 'px';
  fakeBg.style.width = pageWidth + 'px';
}

// Create the fake background element.
fakeBg = setFakeBgStyle(document.createElement('div'));
document.body.appendChild(fakeBg);
// Keep resizing the fake background every second.
size_checker_interval = setInterval(resetFakeBg, 1000);

限制

这是针对Chrome扩展程序的，我想限制我对页面的修改，以添加此单div。这意味着添加CSS来修改html和/或body标记的高度和宽度是不可取的，因为它可能会对页面其余部分的呈现方式产生副作用。

此外，我不想将现有页面包装在div中，因为这可能会破坏某些网站。想象一下，例如，使用CSS选择器body > div设置样式的网站。我想扩展我的网站尽可能少。

为什么我需要这样做？

因为有些人喜欢把他们的答案作为人质，直到他们对我想要这样做有一个非常好的理由™感到满意为止：

这适用于专注于辅助功能的Chrome扩展程序，可在整个页面中应用CSS过滤器。最近版本的Chrome（＆gt; = 45）不会将CSS过滤器应用于<html>或<body>标记上指定的背景。因此，我选择通过将页面的背景复制到具有非常负z-index值的div来解决此限制，以便它可以受到页面范围的CSS过滤器的影响。要使此策略起作用，div需要完全模仿页面背景对用户的显示方式 - 通过文档的确切大小（并且不大）并且至少填充视口。

Answer 1

在这种情况下，

setInterval()是您最好的朋友，您希望将.height()和.width()元素一直异步指定为可由用户动态更改的内容输入和DOM树的变化。如果您使用的是多种语言（PHP，XML，JavaScript），那么我可以将其称为＆＃34;页面嗅探器＃34;并且可以说，它比$(document).ready更好。

Working Example

Answer 2

您应该在窗口调整大小功能中设置宽度和高度，在加载所有数据/图像时，您可能还想在加载函数中添加它。

Answer 3

只需添加width = 100％

e.g; -

你好，世界

Answer 4

我认为你必须这样做：

...
<body>
<script>
function height()
{var height = Math.max(document.body.scrollHeight,
                      document.documentElement.clientHeight);}
function width()
{var width = Math.max(document.body.scrollWidth,
                     document.documentElement.clientWidth);}
</script>
<div height="height()" width="width()">
</div>
</body>
...

如何创建页面大小的div？

限制

为什么我需要这样做？

4 个答案: