Question

我正在尝试使用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;
}

感谢。

Answer 1

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

您可以在jQuery中使用$(document).height()使其在IE6中运行。 E.g。

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

这显然会为所有其他浏览器修复它，但如果我可以避免它，我更喜欢不使用JavaScript。你需要为宽度做同样的事情，实际上，万一有水平滚动。

也有plenty of hacks around to make fixed positioning work in IE6，但他们往往要么对CSS施加一些其他限制，要么使用JavaScript，所以他们可能不值得这么麻烦。

另外，我假设你只有一个这样的面具，所以我建议使用一个ID而不是一个类。

Answer 2

我意识到我在问这个问题很久之后就回答了这个问题，但是在我被这个问题短暂地绊倒之后我就落到了这里，并且目前的答案都没有正确答案。

这是正确答案：

body {
    position: relative;
}

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

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

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

我还建议将<body>设置为height: 100%，以确保您不会在较短的页面上使用部分屏蔽的视口。

先前答案中的两个有效点。正如Ben Blank所说，你可以丢失width和height声明，而是将所有四个角放置。并且mercator是正确的，你应该使用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>

我希望这有助于其他人！

Answer 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>元素的直接子元素且标准框模型生效（即未触发怪癖模式），则会覆盖整个页面。

Answer 4

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

<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>

Answer 5

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

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

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

5 个答案: