Html 如何使 div 100% 的页面（不是屏幕）高度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1003613/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make a div 100% of page (not screen) height?
提问by Lee D
I'm trying to use CSS to create a 'greyed out' effect on my page while a loading box is displayed in the foreground while the application is working. I've done this by creating a 100% height/width, translucent black div which has its visibility toggled on/off via javascript. I thought this would be simple enough; however, when the page content expands to the point that the screen scrolls, scrolling to the foot of the page reveals a portion which is not greyed out. In other words, the 100% in the div's height seems to be applying to the browser viewport size, not the actual page size. How can I make the div expand to cover the whole of the page's content? I've tried using JQuery .css('height', '100%') before toggling it's visibility on but this doesn't change anything.
我正在尝试使用 CSS 在我的页面上创建“变灰”效果，同时应用程序正在运行时在前台显示加载框。我通过创建一个 100% 高/宽、半透明的黑色 div 来完成此操作，该 div 的可见性通过 javascript 打开/关闭。我认为这很简单；但是，当页面内容扩展到屏幕滚动时，滚动到页面底部会显示未变灰的部分。换句话说，div 高度的 100% 似乎适用于浏览器视口大小，而不是实际页面大小。如何使 div 扩展以覆盖整个页面的内容？在切换它的可见性之前，我尝试使用 JQuery .css('height', '100%') 但这不会改变任何东西。
This is the CSS of the div in question:
这是有问题的 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;
}
Thanks.
谢谢。
回答by mercator
If you change position: absoluteto position: fixedit will work in all browsers except IE6. This fixes the div to the viewport, so it doesn't move out of view when scrolling.
如果您更改position: absolute为position: fixed它将在除 IE6 之外的所有浏览器中工作。这会将 div 固定到视口，因此滚动时它不会移出视图。
You can use $(document).height()in jQuery to make it work in IE6 too. E.g.
您也可以$(document).height()在 jQuery中使用以使其在 IE6 中工作。例如
$('.screenMask').height($(document).height());
That would obviously fix it for all the other browsers too, but I prefer not using JavaScript if I can avoid it. You'd need to do the same thing for the width too, actually, in case there's any horizontal scrolling.
这显然也适用于所有其他浏览器，但如果可以避免的话，我宁愿不使用 JavaScript。实际上，您还需要为宽度做同样的事情，以防有任何水平滚动。
There are plenty of hacks around to make fixed positioning work in IE6too, but they tend to either impose some other limitations on your CSS, or use JavaScript, so they're likely not worth the trouble.
在 IE6 中也有很多使固定定位工作的技巧，但它们往往会对您的 CSS 施加一些其他限制，或者使用 JavaScript，因此它们可能不值得麻烦。
Also, I presume you have only one of these masks, so I'd suggest using an ID for it instead of a class.
此外，我认为您只有这些掩码中的一个，因此我建议为它使用 ID 而不是类。
回答by Aaron Adams
I realize I'm answering this long, long after it was asked, but I landed here after being briefly tripped up by this issue, and none of the current answers are correct.
我意识到我在被问到很久之后才回答这个问题，但是在被这个问题短暂绊倒后我来到了这里，目前的答案都不正确。
Here's the right answer:
以下是正确答案：
body {
position: relative;
}
That's it! Now your element will be positioned relative to <body>rather than the viewport.
就是这样！现在您的元素将相对于<body>而不是视口定位。
I wouldn't bother with position: fixed, as its browser support remains spotty. Safari prior to iOS 5 didn't support it at all.
我不会打扰position: fixed，因为它的浏览器支持仍然参差不齐。iOS 5 之前的 Safari 根本不支持它。
Note that your <div>element will cover <body>'s border-box (box + padding + border), but it won't cover its margin. Compensate by setting negative positions on your <div>(e.g. top: -20px), or by removing <body>'s margin.
请注意，您的<div>元素将覆盖<body>的边框框（框 + 填充 + 边框），但不会覆盖其边距。通过在您的<div>(例如top: -20px)上设置负仓位或移除<body>的保证金来进行补偿。
I'd also recommend setting <body>to height: 100%to ensure you don't ever end up with a partially-masked viewport on a shorter page.
我还建议设置<body>为height: 100%以确保您永远不会在较短的页面上看到部分屏蔽的视口。
Two valid points taken from prior answers. As Ben Blank says, you can lose the widthand heightdeclarations, positioning all four corners instead. And mercator is right that you should use an ID instead of a class for such an important single element.
从先前的答案中提取的两个有效点。正如 Ben Blank 所说，您可以丢失width和height声明，而是定位所有四个角。墨卡托是正确的，您应该为如此重要的单个元素使用 ID 而不是类。
This leaves the following recommended complete CSS:
这留下了以下推荐的完整 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;
}
And HTML:
和 HTML：
<body>
<div id="screenMask"></div>
</body>
I hope this helps somebody else!
我希望这对其他人有帮助！
回答by Ben Blank
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;
}
By setting all of top, bottom, left, and right, the height and width are automatically calculated. If screenMaskis a direct child of the <body>element and the standard box model is in effect (i.e. quirks mode has not been triggered), this will cover the entire page.
通过设置所有top, bottom, left, 和right，自动计算高度和宽度。如果screenMask是<body>元素的直接子元素并且标准框模型有效（即尚未触发 quirks 模式），这将覆盖整个页面。
回答by ylebre
If you are using jQuery to set the height before the popup I'm guessing it is OK to add some more javascript :)
如果您在弹出窗口之前使用 jQuery 设置高度，我猜可以添加更多 javascript :)
You can set the height of the div to the scrollHeight of document.body - this way it should cover the whole of the body. You do need to add some extra trickery to make sure it keeps covering the body in case something underneath decides to grow though.
您可以将 div 的高度设置为 document.body 的 scrollHeight - 这样它应该覆盖整个正文。您确实需要添加一些额外的技巧以确保它继续覆盖身体，以防下面的某些东西决定生长。
回答by Servesh Mishra
If you want popup with overlay effect then you can use these step..
如果您想要具有叠加效果的弹出窗口，那么您可以使用这些步骤..
<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>
