Html 如何使div达到页面（而不是屏幕）高度的100%？
我正在尝试使用CSS在我的页面上创建一个“灰显”效果，同时在应用程序运行时，加载框显示在前台。我创建了一个100%高/宽、半透明的黑色div，通过javascript打开/关闭可见性。我认为这很简单；但是，当页面内容扩展到屏幕滚动的点时，滚动到页面底部会显示未变灰的部分。换句话说，div高度的100%似乎应用于浏览器视口大小，而不是实际页面大小。如何使div扩展以覆盖整个页面的内容？在切换JQuery.css的可见性之前，我尝试过使用JQuery.css（'height'，'100%'），但这并没有改变任何事情 这是相关部门的CSS：Html 如何使div达到页面（而不是屏幕）高度的100%？,html,css,Html,Css,我正在尝试使用CSS在我的页面上创建一个“灰显”效果，同时在应用程序运行时，加载框显示在前台。我创建了一个100%高/宽、半透明的黑色div，通过javascript打开/关闭可见性。我认为这很简单；但是，当页面内容扩展到屏幕滚动的点时，滚动到页面底部会显示未变灰的部分。换句话说，div高度的100%似乎应用于浏览器视口大小，而不是实际页面大小。如何使div扩展以覆盖整个页面的内容？在切换JQuery.css的可见性之前，我尝试过使用JQuery.css（'height'，'100%'），但这并
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;
}
谢谢。如果您将
位置：绝对位置：固定$（document）.height（）$('.screenMask').height($(document).height());
另外，我假设您只有其中一个掩码，因此我建议使用ID而不是类。如果您使用jQuery设置弹出窗口前的高度，我猜可以添加更多javascript:） 您可以将div的高度设置为document.body的scrollHeight，这样它应该覆盖整个正文。你确实需要增加一些额外的技巧，以确保它一直覆盖着身体，以防下面的东西决定生长
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;
}
通过设置所有
顶部底部左侧右侧screenMaskbody {
position: relative;
}
顶部：-20px高度：100%宽度高度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;
}
<body>
<div id="screenMask"></div>
</body>
我希望这能帮助别人 如果您希望弹出具有覆盖效果，则可以使用以下步骤
<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>
.覆盖{
背景：#000；
不透明度：0.5；
位置：固定；
z指数：1；
宽度：100%；
身高：100%；
}
.弹出窗口{
宽度：500px；
保证金：自动；
位置：固定；
z指数：2；
高度：300px；
}
大家好
position:fixed位置的诀窍：绝对左右上下身体minheight:100%