我正在尝试使用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;
}
谢谢.
mer*_*tor 58
如果更改position: absolute为position: fixed它将适用于除IE6之外的所有浏览器.这会将div固定到视口,因此在滚动时它不会移出视图.
您可以$(document).height()在jQuery中使用它以使其在IE6中工作.例如
$('.screenMask').height($(document).height());
这显然会为所有其他浏览器修复它,但如果我可以避免它,我更喜欢不使用JavaScript.你需要为宽度做同样的事情,实际上,万一有水平滚动.
在IE6中也有大量的hacks来进行固定定位工作,但它们往往要么对CSS施加一些其他限制,要么使用JavaScript,所以它们可能不值得这么麻烦.
另外,我假设你只有一个这样的面具,所以我建议使用一个ID而不是一个类.
Aar*_*ams 17
在我被问到这个问题很久之后,我意识到我已经回答了很久,但是在我被这个问题短暂地绊倒之后我就落到了这里,并且目前的答案都没有正确.
这是正确的答案:
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>
我希望这有助于其他人!
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>并且标准盒模型有效（即尚未触发怪异模式），则这将覆盖整个页面。