如何在css中用页面的全部高度填充div? (页面高于100％)用于加载ajax gif背景 [英] how to fill div with full height of page in css? (page is taller than 100%) for ajax loading gif background

问题描述

好的，有几个类似的问题，但我没有想要的任何东西.

ok there are several similar questions but not quite anything that I want.

页面上的ajax请求很少，我想在屏幕中央显示图像，并且一切正常.

I have few ajax requests on page and I want to show the image in the center of the screen, and its all working OK.

仅是为了使其看起来更加突出，我想将该图像放置在具有半透明背景的div上，因此对于最终用户而言，它更加明显.现在到了棘手的部分.

Just to make it look more prominent, I wanted to place that image on a div with translucent background, so its more obvious for the end users. Now comes the tricky part.

我像这样用CSS制作了div:

I made the div with css like this:

.divLoadingBackground
    {
        filter: Alpha(Opacity=40); -moz-opacity:0.4; opacity: 0.4;
        width: 100%;
        height: 100%; 
        background-color: #333;
        position: fixed;
        top: 0px; 
        left: 0px;
    }

这可以完全填满页面，或者，我应该说，这可以填满视口.如果我向下滚动页面，则该页面再次正常.无论页面有多长，我都希望该div跨越页面的整个长度.

This fills the page up alright, or, I should say, this fills the viewport. If I scroll the page down, the page is again normal. I want this div to span the ENTIRE LENGTH of the page, no matter how long the page is.

以下是我为快速演示问题而制作的样机示例:

Here is an example mockup of the problem I made to quickly demonstrate:

如您所见，我以SO为样机的示例;)图像1显示了它出现时是可以的.图2显示了它与滚动页面相对应. 我是c#开发人员，而CSS对我来说就像古代的拉丁语一样陌生.

As you can see, I took the example of SO for the mockup ;) image 1 shows that its okay when it appears. image 2 shows that it goes up with the page on scroll. I'm a c# developer and css is as alien to me as ancient latin.

如何使divLoadingBackground div填充页面的整个长度?

How to make this divLoadingBackground div to fill out the entire length of the page?

非常感谢您的帮助. 如果您需要任何其他信息，请发表评论！

Many thanks for any help. If you need any additional info, please comment!

推荐答案

我在您的CSS中没有看到的一件事是z-index.尽管已解决，但已解决此问题，但有时，根据其他div的位置，您的divLoadingBackground div可能会出现在其中一个div中.

One thing I dont see in your css is z-index. Fixed, although, fixes this problem, sometimes, based on how other divs are positioned, your divLoadingBackground div could end up in one of the divs.

尝试添加

z-index: 9999;

或类似的东西，看看是否可行.

or something similar and see if it works.

这篇关于如何在css中用页面的全部高度填充div? (页面高于100％)用于加载ajax gif背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！