浏览器的大小，包括滚动条？

Question

简单的问题，我如何设置一个页面覆盖（只是一个半透明的黑色封面），使其达到视口高度和宽度的 100%，包括滚动条？

我已经试过了：

body{
background-image:url(../pictures/background2.png);
background-position:top;
background-size:100% 100%;
background-repeat:no-repeat;
margin:0;
border:0;
height:100%;
}

/*Loading*/
#loadingoverlay {
position: absolute;
height: 100%;
width: 100%;
background-color: rgba(0,0,0,0.7);
filter:alpha(opacity = 80);
top:0;
bottom:0;
z-index:99;
}

它只覆盖没有滚动条的视口。换句话说，当我向下滚动时，低于一个屏幕高度的内容不会被叠加层覆盖。

显然这也行不通：

/*Loading*/
#loadingoverlay {
position: absolute;
height:9999px;
width:9999px;
background-color: rgba(0,0,0,0.7);
filter:alpha(opacity = 80);
top:0;
bottom:0;
z-index:99;
}

因为这只是将视口延伸到 9999x9999。

Answer 1

滚动条不是“视口”的一部分。您的样式和 javascript 在视口上有域，但在滚动条上没有域。您可以关闭滚动条，但不能覆盖它。可以做无窗口 Flash，但这不是你想要的实现。