当div扩展页面高度时，javascript覆盖未覆盖整个页面

我意识到已经有几个这样的问题了，但我认为我的情况有点不同。
我有一个div，我绝对定位并浮动在页面顶部，我在它后面设置了一个覆盖层以灰显页面的其余部分。我让它正常工作，直到你上下滚动页面

问题是，当div出现时，它仍然填充着ajax数据。因此，bg覆盖的高度和宽度已经设置好了，但是一旦所有数据加载到浮动div中，它有时会向下推页面以增加高度。因此，我无法计算窗口或文档的高度和宽度，因为浮动div可能尚未完全加载，一旦加载完毕，它会将屏幕进一步向下推，导致bg覆盖层无法覆盖整个页面

例如，在代码中，它是这样的：

loadBoxContent = function(){
..DO AJAX HERE..
..PUT CONTENT INTO FLOATING DIV..
$('#floatDiv').show()
$('#darkOverlay').height($(window).height());

}

我通过添加一个警报来验证这一点，这样当我单击警报时，bg覆盖层就能够计算出真实的页面大小，看起来很好。 对不起，如果这听起来让人困惑，但希望你能得到我想要的。我想这不太难，但我还没弄明白。 任何帮助都将不胜感激，我正在使用jquery

谢谢

以下是解决方案：

不要试图发明轮子

下面是一个演示：

现在你只需要为你的页面创建一个主容器div，然后让这个简单的插件帮你完成

也许您想阅读插件源代码并了解其工作原理…

Overlay；）

**更新，将所有角的位置设置为0，而不是使用宽度/高度100%**

$("<div/>")
 .css({
    position:"fixed", // ze trick 
    background:"#000",
    opacity:.5,
    top:0,
    bottom: 0,
    left:0,
    right: 0,
    zIndex: 2999 // everything you want on top, gets higher z-index
  })
 .appendTo("body");

---

I当您的内部div大小大于屏幕大小时，它不起作用。@Farzin是的，它起作用，

fixed

定位是相对于视口的，而不是相对于页面的，因此当您开始滚动时，整个视口仍被覆盖。复制代码，将其粘贴到此站点（jQuery当前）的浏览器控制台中，然后查看它是否起作用；）我错过了位置：固定件！谢谢，我知道它必须是相对简单的。注意：位置：在（大多数？）移动浏览器中禁用fixed，但是如果在移动站点中使用modals是一件好事……一个问题是，将数据填充到浮动div中的回调函数与计算bg覆盖的高度和宽度的回调函数相同。因此，我认为在计算bg覆盖高度时，浮动div仍在扩展（从而扩展页面的高度）。使用这个jQuery插件，您不需要手动设置浮动div的大小。jQuery插件将为您完成这项工作。您只需要调用ajax方法，有关浮动div的所有内容都将由这个jQuery库控制。

$("#dark-overlay").show();