【问题标题】：How do I create a div the size of the page?如何创建页面大小的 div？
【发布时间】：2015-08-02 16:25:11
【问题描述】：

请注意，我不是询问如何将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 需要准确地模仿页面背景向用户显示的方式——通过准确的文档大小（并且不能更大）并且至少填充视口。

【问题讨论】：

你为什么不使用 twitter 引导程序？我觉得您的要求类似于具有 container-fluid class 的 div
@RamkumarKR 读到它，该类用于“跨越视口的整个宽度”的东西，这不是我所追求的。
我不确定您的问题出在哪里，例如，要创建一个粘性页脚，您需要创建一个占据整个视口并包装内容的 div 包装器，因此如果它更大，那么它会将页脚向下推.您尝试做的事情有何不同？请详细点，有代码吗？
@MatthewRath 我的问题的第一行断言我不是在问如何设置视口大小的东西。我不想做任何像粘性页脚这样的事情。我想要做的是不同的，因为我想要页面大小的东西，而不是 VIEWPORT。这些是不同的概念。
这还不清楚。什么是网站上的“页面”？如果您将 div 设置为页面大小但不受其他任何限制，您可以将其设置为您需要的任何大小：您在计算什么？页面中没有要计算的内容。如果我说错了，请编辑问题以准确说明您在做什么 - 可能是为什么，因为可能有比您目前设想的更好的方法。

标签： javascript html css google-chrome

【解决方案1】：

setInterval() 是您最好的朋友，在这种情况下，您希望元素的 .height() 和 .width() 始终异步指定为可以通过用户输入和 DOM 树更改动态更改的内容。我称之为“页面嗅探器”，可以说，如果您使用多种语言（PHP、XML、JavaScript），它比$(document).ready 工作得更好。

Working Example

【讨论】：

您的示例并不能完全代表我所描述的情况，但我目前的解决方案已经涉及使用setInterval()。我真的希望有一种更好的方法，而不是定期检查对象并重新计算大小。

【解决方案2】：

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

【讨论】：

当用户调整窗口大小时触发窗口调整大小，而不是当窗口中的某些内容发生变化时。

【解决方案3】：

只需添加 width=100%

例如;-

你好世界

【讨论】：

【解决方案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 的大小。