如何创建一个与页面大小相同的div？

Question

如何创建一个与页面大小相同的div？

3

请注意，我并不是在询问如何使一个`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版本（>= 45）不会将CSS过滤器应用于在<html>或<body>标签上指定的背景。因此，我选择通过将页面背景复制到一个非常负面的z-index值的div上来解决这个限制，以便它可以受到页面范围内的CSS过滤器的影响。为了使这种策略奏效，该div需要完全模仿页面背景对用户的呈现方式-即成为文档的精确大小（不大于此）并至少填充视口。

- user108471

@RamkumarKR 从阅读中了解到，该类是用于“跨越整个视口宽度”的某些内容，这不是我想要的。 - user108471

2

我不确定你的问题出在哪里，例如要创建一个粘性页脚，您需要创建一个div包装器，它占用整个视口并包装内容，因此如果内容较大，则会将页脚向下推。您尝试做什么有什么不同吗？请提供更多具体信息，是否有任何代码？ - marblewraith

@MatthewRath 我问题的第一行就表明了我不是在问如何设置视口大小。我也不是在尝试做类似于粘性页脚的东西。我想要做的与此不同，因为我想要的是页面大小，而不是视口大小。这些是不同的概念。 - user108471

@AndrewLeach 我不确定我如何更清楚地表达我认为页面大小的含义，除了发布我所发布的JavaScript片段。也许你应该查阅这些函数的文档？ - user108471

@MatthewRath 这接近我想要做的事情，但我不能包装页面内容，因为那可能会破坏一些编写不良的CSS选择器。想象一下页面做了一些愚蠢的事情，比如样式body > div。这个包装器会破坏它。作为扩展作者，我无法对网站强制执行任何指南，所以我只能处理像这样的不良实践，并尝试确保我的扩展程序做正确的事情。 - user108471

显示剩余4条评论

4个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Alexander Dixon · Answer 1

setInterval()在这种情况下是您的好帮手，当您想要异步指定元素的.height()和.width()时，这些元素可以被用户输入和DOM树更改动态地修改。我称之为“页面嗅探器”，可以说，如果您正在使用多种语言（PHP、XML、JavaScript），它比$(document).ready更有效。

工作示例

- Medda86 · Answer 2

你应该在窗口调整大小函数中设置宽度和高度，也可以在加载函数中添加，当所有数据/图像都加载完成时。

- Ujjwal Kumar Gupta · Answer 3

只需添加width=100%

e.g;-

你好，世界。

- Norayr Galikyan · 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>
...