如何使一个 div 的高度占据整个页面（而不是屏幕）？

Question

如何使一个 div 的高度占据整个页面（而不是屏幕）？

58

我试图使用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;
}

谢谢。

- Lee D

3

在您显示半透明灰色区块时禁用滚动条是否可行？您真的希望用户能够向下滚动查看他们无法进行任何操作的内容吗？ - Adam

5个回答

19

我意识到我回答这个问题的时间已经很久了，但是在遇到这个问题后我来到这里，并且当前的回答都不正确。

这里是正确的答案：

body {
    position: relative;
}

完成了！现在你的元素会相对于 <body> 而不是视口进行定位。

我不建议使用 position: fixed，因为它的浏览器支持仍然不稳定。Safari 在 iOS 5 之前根本不支持它。

请注意，您的 <div> 元素将覆盖 <body> 的边框区域（包括 box、padding 和 border），但它不会覆盖其外边距。通过给 <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>

希望这能帮到其他人！

- Aaron Adams

+1，但我要指出，即使这种方法在将滚动容器的位置更改为相对位置时可能会产生意想不到的后果。幸运的是，今天我的滚动容器已经是相对定位的了！有时使用position: absolute结合left、right、top和bottom的技巧真的可以救命，但总是容易被遗忘。 - Steven Lu

1

相对于 body 定位几乎可以解决问题，但将 body 的高度设置为 100% 并不是一个有用的解决方案：虽然它可以修复页面不填充视口的问题，但会破坏更大的页面，即 body 只会有视口的高度。此外，在 body 上设置 min-height: 100% 似乎根本没有任何作用（Firefox）。 - Cedric Reichenbach

5

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

- Ben Blank

如果底层页面的高度超过一个视口高度，难道您不需要使用 position:fixed 来防止 div.screenMask 滚动吗？ - David Thomas

1

这在IE6中根本不起作用。在其他浏览器中，它需要在body上使用position: relative才能工作，即使如此，它也只在垂直滚动时起作用，而不是水平滚动。 - mercator

2

如果您想要弹出层具有覆盖效果，那么可以按照以下步骤进行操作：

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

- Servesh Mishra

2

如果你在使用jQuery在弹出窗口之前设置高度，我猜添加一些JavaScript应该是可行的 :)

您可以将div的高度设置为document.body的scrollHeight-这样它应该覆盖整个body。但是，您需要添加一些额外的技巧，以确保它在下面有东西决定增长时仍然覆盖整个body。

- ylebre

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- mercator · Accepted Answer

如果你把 position: absolute 改成 position: fixed，它将在除了IE6以外的所有浏览器中工作。这会将div固定在视口中，因此在滚动时不会移出视图。

你可以在jQuery中使用$(document).height()来使其在IE6中也能正常工作。例如：

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

那显然也会为所有其他浏览器解决它，但如果我可以避免使用JavaScript，我更喜欢不使用它。实际上，在宽度方面，您还需要做同样的事情，以防有任何水平滚动。

在IE6中，有很多hack方法可以使固定定位工作, 但它们往往会对您的CSS施加其他限制，或者使用JavaScript，因此它们可能不值得麻烦。

此外，我假设您只有其中一个面具，因此建议使用ID而不是类。