如何使 div 100% 的页面（不是屏幕）高度？答案

【问题标题】：How to make a div 100% of page (not screen) height?如何使 div 100% 的页面（不是屏幕）高度？
【发布时间】：2010-11-03 11:13:54
【问题描述】：

我正在尝试使用 CSS 在我的页面上创建一个“变灰”效果，同时在应用程序运行时在前台显示一个加载框。我通过创建一个 100% 高度/宽度、半透明的黑色 div 来做到这一点，它的可见性通过 javascript 打开/关闭。我认为这很简单；但是，当页面内容扩展至屏幕滚动时，滚动到页面底部会显示未变灰的部分。换句话说，div 高度的 100% 似乎适用于浏览器视口大小，而不是实际页面大小。如何使 div 扩展以覆盖整个页面的内容？在打开它的可见性之前，我尝试过使用 JQuery .css('height', '100%') 但这并没有改变任何东西。

这是相关 div 的 CSS：

div.screenMask
{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background-color: #000000;
    opacity: 0.7;
    filter: alpha(opacity=70);
    visibility: hidden;
}

谢谢。

【问题讨论】：

在显示半透明灰色 div 时禁用滚动条是否有效？您真的希望用户能够向下滚动以查看他们无论如何都无法执行的操作吗？

标签： html css

【解决方案1】：

如果您将position: absolute 更改为position: fixed，它将适用于除 IE6 之外的所有浏览器。这会将 div 固定到视口，因此在滚动时它不会移出视图。

您可以在 jQuery 中使用 $(document).height() 使其也可以在 IE6 中运行。例如

$('.screenMask').height($(document).height());

这显然也适用于所有其他浏览器，但如果可以避免的话，我宁愿不使用 JavaScript。实际上，你也需要对宽度做同样的事情，以防有任何水平滚动。

也有 plenty of hacks around to make fixed positioning work in IE6，但它们往往会对你的 CSS 施加一些其他限制，或者使用 JavaScript，因此它们可能不值得麻烦。

另外，我假设您只有其中一个掩码，所以我建议使用 ID 而不是类。

【讨论】：

如果掩码是用Javascript显示的，还有什么Javascript可以解决高度问题？
谢谢，只需将绝对更改为固定即可！关于 ID 的公平点。
@Lee：太好了... @Paolo：这几乎不是问题，我必须同意。但是，虽然 JS 支持不是这里的问题，但您最终确实将样式与行为混合在一起，并且您也可能（稍微）影响性能。李也回答了你的问题。在这种情况下，JavaScript 解决方案实际上并不是必需的。
啊，还记得 100% 实际上意味着 100% 的美好时光吗？

【解决方案2】：

如果您使用 jQuery 在弹出窗口之前设置高度，我猜可以添加更多 javascript :)

您可以将 div 的高度设置为 document.body 的 scrollHeight - 这样它应该覆盖整个 body。您确实需要添加一些额外的技巧，以确保它继续覆盖身体，以防下面的东西决定生长。

【讨论】：

【解决方案3】：

div.screenMask
{
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 1000;
    background-color: #000000;
    opacity: 0.7;
    filter: alpha(opacity=70);
    visibility: hidden;
}

通过设置所有top、bottom、left和right，自动计算高度和宽度。如果screenMask 是<body> 元素的直接子元素并且标准盒子模型有效（即未触发怪癖模式），这将覆盖整个页面。

【讨论】：

如果底层页面高于一个视口高度，您不需要使用position:fixed 来防止 div.screenMask 滚动吗？
这在 IE6 中根本不起作用。在其他浏览器中，它需要 position: relative 在 body 上工作，即使这样它也只能在垂直滚动上工作，而不是水平滚动。

【解决方案4】：

我意识到我在被问到很久很久之后才回答这个问题，但我在被这个问题短暂绊倒后来到这里，目前的答案都不是正确的。

这是正确的答案：

body {
    position: relative;
}

就是这样！现在您的元素将相对于<body> 而不是视口定位。

我不会打扰position: fixed，因为它的浏览器支持仍然参差不齐。 iOS 5 之前的 Safari 根本不支持它。

请注意，您的 <div> 元素将覆盖 <body> 的边框（框 + 填充 + 边框），但不会覆盖其边距。通过在您的<div> 上设置负仓位（例如top: -20px）或删除<body> 的保证金来进行补偿。

我还建议将<body> 设置为height: 100%，以确保您永远不会在较短的页面上看到部分蒙版的视口。

取自先前答案的两个有效点。正如 Ben Blank 所说，您可能会丢失 width 和 height 声明，而是定位所有四个角。墨卡托是对的，您应该为如此重要的单个元素使用 ID 而不是类。

剩下以下推荐的完整 CSS：

body {
    position: relative;
    margin: 0;
}

#screenMask {
    position: absolute;
    left: 0; right: 0;
    top: 0; bottom: 0;
    z-index: 1000;
    background-color: #000;
    opacity: 0.7;
    filter: alpha(opacity=70);
    visibility: hidden;
}

还有 HTML：

<body>
    <div id="screenMask"></div>
</body>

我希望这对其他人有帮助！

【讨论】：

+1，但是我要指出的是，即使将滚动容器的位置更改为相对位置，这也是一种有问题的方法，可能会产生无法预料的后果。幸运的是，今天，我的滚动容器已经相对定位了！将position: absolute 与left、right、top 和bottom 结合使用的技巧有时是真正的救生员，而且总是很容易忘记。
相对于body 的定位几乎可以解决这个问题，但是将主体的高度设置为 100% 并不是一个有用的解决方案：虽然它修复了未填满视口的页面，但它会破坏更大的页面，即body 将只有视口的高度。此外，将 min-height: 100% 设置为 body 似乎什么都不做（Firefox）。

【解决方案5】：

如果您想要具有叠加效果的弹出窗口，那么您可以使用这些步骤..

<style>
.overlay{
 background:#000;
 opacity:0.5;
 position:fixed;
 z-index:1;
 width:100%;
 height:100%;
}
.popup{
 width:500px;
 margin:auto;
 position:fixed;
 z-index:2;
 height:300px;
}
</style>
<div class="overlay"></div>
<div class="popup">
      Hello everyone
</div>

【讨论】：