Javascript 如何使绝对定位的div填充整个文档区域

我需要一个绝对的

div

，它是

body

的子对象，填充整个文档区域（窗口+任何滚动区域） --宽度：100%仅填充可视屏幕

我更喜欢只使用CSS的解决方案，但纯javascript也可以。我试过，但没有成功：

opaque.style.minHeight = Math.max(document.body.offsetHeight, document.body.scrollHeight);

我对下面的代码做了一个分析。如果向下滚动输出，您将看到不透明div停止在渲染输出窗口时的任何高度

如果你想知道。。。它是对它后面的div中的所有内容进行不透明覆盖（想想幻灯片）。我唯一的其他解决方案是禁用滚动，但这是有问题的

谢谢你的帮助

<div class="page-container"></div>    
<div id="opaque"></div>

body {
    width:100%;
}
.page-container {
    position: relative;
    max-width:978px; 
    width: 100%;
    min-height:2500px; 
    margin:0 auto -50px auto; 
    border:solid #999;
    border-width:2px;
    background: lightblue;
}

#opaque {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 100;
    background: grey;
    filter: alpha(opacity=70);
    opacity: 0.7;
}

身体{
宽度：100%；
}
.页面容器{
位置：相对位置；
最大宽度：978px；
宽度：100%；
最小高度：2500px；
保证金：0自动-50px自动；
边框：实心#999；
边框宽度：2倍；
背景：浅蓝色；
}
#不透明的{
位置：绝对位置；
顶部：0px；
左：0px；
宽度：100%；
身高：100%；
z指数：100；
背景：灰色；
过滤器：α（不透明度=70）；
不透明度：0.7；
}

您可以在身体上放置一个

位置：relative

，这样身体将被子元素用作高度方面的参考点（与

文档

对象相反）.

您可以在身体上放置一个

位置：relative

，以便身体将被子元素用作高度方面的参考点（与

文档

对象相反）。

可以使用

#opaque {
    position: fixed;
    top: 0;
    left: 0;
    right:0;
    bottom:0;
}

由于创建了水平滚动条，从正文中删除宽度：100%

根据用例的不同，在使用将body overflow设置为hidden的覆盖时，通常会向body添加类

可以使用

#opaque {
    position: fixed;
    top: 0;
    left: 0;
    right:0;
    bottom:0;
}

由于创建了水平滚动条，从正文中删除宽度：100%

根据用例的不同，在使用将body overflow设置为hidden的覆盖时，通常会向body添加类

---

使用javascript将一个元素的高度设置为另一个元素的高度

var o = document.getElementById('opaque');
var p = document.querySelector('.page-container');

o.style.height = window.getComputedStyle(p).getPropertyValue("height");

---

使用javascript将一个元素的高度设置为其他元素的高度

var o = document.getElementById('opaque');
var p = document.querySelector('.page-container');

o.style.height = window.getComputedStyle(p).getPropertyValue("height");

---

哇。这真的很简单。更令人惊奇的是，它没有把我网站的其他部分搞砸。你能评论一下你的解决方案和charlietfl的解决方案之间的区别吗？他们都工作。要么更好。哇。这真的很简单。更令人惊奇的是，它没有把我网站的其他部分搞砸。你能评论一下你的解决方案和charlietfl的解决方案之间的区别吗？他们都工作。你的答案也可以。谢谢它产生的结果与sahbeewah的结果相同。这两个答案中有哪一个更好？老实说，我已经做了很多年了，刚刚从另一个答案中学到了一个新的窍门。通常有很多方法可以实现相同的目标我只是读到定位是“相对于视口”的，所以它似乎就是为了实现这一目标而设计的。这也解释了为什么我过去从不需要它。谢谢。你的回答也很有用。谢谢它产生的结果与sahbeewah的结果相同。这两个答案中有哪一个更好？老实说，我已经做了很多年了，刚刚从另一个答案中学到了一个新的窍门。通常有很多方法可以实现相同的目标我只是读到定位是“相对于视口”的，所以它似乎就是为了实现这一目标而设计的。这也解释了为什么我过去从不需要它。谢谢，太好了。感谢使用

getComputedStyle

方法。我将使用一个纯css解决方案来解决这个问题，但这将在将来有所帮助。非常好。感谢使用

getComputedStyle

方法。我将为这一个使用纯css解决方案，但这将在将来有所帮助。