如何使一个div 100％的页面（不是屏幕）的高度？
我正尝试使用CSS在页面上创build“灰色”效果，同时在应用程序正在工作时在前台显示一个加载框。 我已经通过创build一个100％的高度/宽度，半透明的黑色div，它的可见性通过javascript打开/closures。 我认为这会很简单， 但是，当页面内容扩展到屏幕滚动的位置时，滚动到页面底部会显示一个不灰色的部分。 换句话说，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; } 谢谢。
如果你改变position: absolute position: fixed它将工作在除IE6以外的所有浏览器。 这将div修复到视口，所以在滚动时它不会移出视图。
你可以在jQuery中使用$(document).height()来使它在IE6中工作。 例如
$('.screenMask').height($(document).height());
这显然会修复所有其他浏览器，但我更喜欢不使用JavaScript，如果我可以避免它。 实际上，你也需要对宽度做同样的事情，以防有横向滚动。
在IE6中也有大量的固定定位工作 ，但是他们往往会对你的CSS施加一些其他限制，或者使用JavaScript，所以他们可能不值得这样做。
另外，我认为你只有一个这些口罩，所以我build议使用一个ID而不是一个类。
我意识到自己在问了很久以后才回答这个问题，但是在被这个问题扼杀之后，我就到了这里，目前没有一个答案是正确的。
这是正确的答案：
body { position: relative; }
而已！ 现在，您的元素将相对于<body>而不是视口进行定位。
我不打扰的position: fixed ，因为它的浏览器支持仍然斑点。 iOS 5之前的Safari根本不支持它。
请注意，您的<div>元素将覆盖<body>的边框（框+边框+边框），但不会覆盖边框。 通过在你的<div> （例如top: -20px ）上设置负值来补偿，或者去掉<body>的余量。
我还build议将<body>设置为height: 100%以确保您不会在较短的页面上获得部分遮罩的视口。
两个有效的分数来自以前的答案。 正如Ben Blank所说，你可能会失去width和height声明，而是将所有四个angular落定位。 而mercator是正确的，你应该使用一个ID而不是一个类这样一个重要的单一元素。
这留下了以下build议完整的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>元素的直接子元素，并且标准框模型有效（即怪异模式没有被触发），则这将覆盖整个页面。
如果你想popup覆盖效果，那么你可以使用这些步骤..
<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>
如果你使用jQuery来设置popup窗口之前的高度我猜测可以添加更多的JavaScript 🙂
您可以将div的高度设置为document.body的scrollHeight – 这样它应该覆盖整个body。 你需要添加一些额外的技巧，以确保它保持覆盖身体的情况下，下面决定增长。
