Question

我需要一个绝对div只有body的子项填充整个文档区域（窗口+任何滚动区域） - 宽度：100％仅填充可视屏幕

我更喜欢仅限CSS的解决方案，但纯粹的javascript是可以的。我尝试没有成功设置：

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

我制作了以下代码jsFiddle。如果向下滚动输出，您将看到opaque 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

Answer 2

您可以在身体上放置一个position: relative，以便身体在高度方面被子元素用作参考点（而不是document对象）。

Answer 3

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

android:paddingBottom="100dp"

FIDDLE

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

3 个答案: