如何使页面（非屏幕）的高度100％的div？
我正尝试使用CSS在页面上创建“灰色”效果，同时在应用程序正在工作时前台显示加载框。 我通过创建100％高度/宽度，半透明的黑色div，通过javascript打开/关闭其可见性来完成此操作。 我认为这很简单， 但是，当页面内容扩展到屏幕滚动的位置时，滚动到页面底部会显示一个不灰色的部分。 换句话说，div高度的100％似乎适用于浏览器视口大小，而不是实际的页面大小。 如何让div扩展为覆盖整个页面的内容？ 在尝试使用JQuery .css（'height'，'100％'）之前，我尝试过使用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;
}
谢谢。
我意识到在问了很长时间之后我已经回答了这么长时间，但是在我被这个问题短暂绊倒之后，我降落在这里，目前的答案都不正确。
这是正确的答案：
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>元素的直接子元素，并且标准框模型有效（即怪异模式没有被触发），则它将覆盖整个页面。