如何使div 100％的页面（不是屏幕）高度？ [英] How to make a div 100% of page (not screen) height?

问题描述

我试图使用CSS在我的页面上创建一个灰色效果，而加载框在应用程序正在工作时显示在前台。我这样做是通过创建一个100％的高度/宽度，半透明的黑色div，它的可见性通过javascript切换开/关。我认为这会很简单;然而，当页面内容扩展到屏幕滚动的点时，滚动到页面的底部显示不灰的部分。换句话说，div的高度的100％似乎适用于浏览器视口大小，而不是实际的页面大小。如何让div扩展以覆盖整个网页的内容？我试过使用JQuery .css（'height'，'100％'）之前切换它的可见性，但这不改变任何东西。

I'm trying to use CSS to create a 'greyed out' effect on my page while a loading box is displayed in the foreground while the application is working. I've done this by creating a 100% height/width, translucent black div which has its visibility toggled on/off via javascript. I thought this would be simple enough; however, when the page content expands to the point that the screen scrolls, scrolling to the foot of the page reveals a portion which is not greyed out. In other words, the 100% in the div's height seems to be applying to the browser viewport size, not the actual page size. How can I make the div expand to cover the whole of the page's content? I've tried using JQuery .css('height', '100%') before toggling it's visibility on but this doesn't change anything.

这是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以外的所有浏览器。

If you change position: absolute to position: fixed it will work in all browsers except IE6. This fixes the div to the viewport, so it doesn't move out of view when scrolling.

您可以使用 $（document）.height （）在jQuery中使它在IE6中也工作。例如

You can use $(document).height() in jQuery to make it work in IE6 too. E.g.

$('.screenMask').height($(document).height());

这显然会解决所有其他浏览器，但我不喜欢使用JavaScript，如果我可以躲开它。

That would obviously fix it for all the other browsers too, but I prefer not using JavaScript if I can avoid it. You'd need to do the same thing for the width too, actually, in case there's any horizontal scrolling.

这里有大量的黑客在IE6中进行固定定位，但他们往往要么强加一些其他限制你的CSS，或使用JavaScript，所以他们可能不值得的麻烦。

There are plenty of hacks around to make fixed positioning work in IE6 too, but they tend to either impose some other limitations on your CSS, or use JavaScript, so they're likely not worth the trouble.

此外，我认为你只有一个面具，所以我建议使用ID而不是类。

Also, I presume you have only one of these masks, so I'd suggest using an ID for it instead of a class.

这篇关于如何使div 100％的页面（不是屏幕）高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！