javascript - 如何让一个绝对定位的div填满整个文档区域

Question

我需要一个绝对的 div，它只是 body 的子元素，可以填充整个文档区域(窗口 + 任何滚动区域) -- width: 100% 只填满可视屏幕

我更喜欢纯 CSS 解决方案，但纯 JavaScript 也可以。我试过没有成功设置:

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

我做了一个jsFiddle下面的代码。如果向下滚动输出，您会看到不透明的 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;
}

Answer 1

可以用

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

由于创建了水平滚动条，从正文中删除了 width:100%

根据用例，在使用将主体溢出设置为隐藏的覆盖层时，通常会向主体添加类

DEMO