如何在CSS中用页面的完整高度填充div？（页面高度超过100%）ajax加载gif背景

发布于 2024-09-27 18:57:54 字数 789 浏览 2 评论 0原文

好吧，有几个类似的问题，但不完全是我想要的。

我在页面上有几个ajax请求，我想在屏幕中央显示图像，并且一切正常。

为了让它看起来更突出，我想将该图像放置在具有半透明背景的 div 上，这样对于最终用户来说更明显。现在是棘手的部分。

我用 css 制作了这样的 div：

.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 跨越页面的整个长度，无论页面有多长。

这是我为了快速演示而制作的问题的示例模型：

alt text

如您所见，我举了以下示例对于样机来说也是如此；）图像 1 显示它出现时没问题。图 2 显示它随着页面滚动而上升。我是 ac# 开发人员，CSS 对我来说就像古代拉丁语一样陌生。

如何让这个divLoadingBackground div填满页面的整个长度？

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

原文

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

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.

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.

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;
    }

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:

alt text

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.

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!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

混浊又暗下来 2024-10-04 18:57:54

我在你的 css 中没有看到的一件事是 z-index。已修复，虽然修复了此问题，但有时，根据其他 div 的定位方式，您的 divLoadingBackground div 可能最终出现在其中一个 div 中。

尝试添加

z-index: 9999;

或类似的东西，看看它是否有效。

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.

try adding

z-index: 9999;

or something similar and see if it works.

回复收藏 0 原文

流年已逝 2024-10-04 18:57:54

本来可以将此放在评论中，但似乎我的代表太低，无法发表评论。

.divLoadingBackground div 位于 DOM 树中的什么位置？由于它具有固定位置，因此它不应随页面滚动。这让我相信该元素嵌套得太深。尝试将其放在页面的正文级别，看看是否有帮助。

另外，您确定其他一些 css 指令不会将位置属性更改为绝对或其他属性吗？

另外，请确保使用正确的 DOCTYPE。这对固定位置元素有一些影响。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

哦，当然，IE6 及以下版本不支持固定位置。

Would have put this in a comment, but it seems I have too low rep to comment.

Where is the .divLoadingBackground div located in the DOM tree? Since it has fixed position, it shouldn't scroll with the page. This makes me belive that the element is too deeply nested. Try putting it right in the body level of the page and see if that helps.

Also, are you sure that some other css directive isn't changing the position attribute to absolute or something?

Also, make sure to use the right DOCTYPE. That has some impact on fixed position elements.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Oh, and ofcourse, fixed position isn't supported in IE6 and below.

回复收藏 0 原文

扛起拖把扫天下 2024-10-04 18:57:54

我相信您将需要 JavaScript/jQuery 来动态地将相关 div 的高度设置为渲染后页面的高度。

如果您正在进入网络世界，那么是时候学习新语言“CSS”以及 Perpahs（不那么令人畏惧的 JavaScript）了。

回复收藏 0 原文

梦冥 2024-10-04 18:57:54

几年前，当我需要这样的功能时，我研究了 Google 日历是如何实现的。

基本上，它们使用计时器驱动的 JavaScript 文件来检查窗口的高度并相应地调整所包含的 DIV 标记（或 IFRAME 标记，您喜欢的任何容器标记）的高度。

以下是我所处理的页面中的代码片段：

<script type="text/javascript"> 
    document.getElementsByTagName("body")[0].style.height = "100%";
    document.getElementsByTagName("html")[0].style.height = "100%";
    document.getElementsByTagName("body")[0].style.minHeight = "100%";
    document.getElementsByTagName("html")[0].style.minHeight = "100%";

    function height()
    {
       try
       {
          height_iframe();
       }
       catch(err)
       {
       }
    }
    window.onload=height;

    // --

    var ie6WorkaroundIFrameResize = 1;

    function height_iframe()
    {
       var any = false;
       var offset = 300;
       var c = document.getElementById("iframecontent");

       if ( c!=null )
       {
           c.style.height = (GetClientHeight()-offset)+"px";
           any = true;

           var d = document.getElementById("iframeie6");
           if ( d!=null )
           {
              d.style.height = (GetClientHeight()-(offset+ie6WorkaroundIFrameResize))+"px";
              any = true;

              ie6WorkaroundIFrameResize = 0;
           }
       }

       if ( any )
       {                                                                             
          setTimeout( 'height_iframe()', 300 );
       }
    }

    function GetClientHeight()
    {
       return document.documentElement.clientHeight;
    }
</script>

基本上，脚本通过 GetClientHeight() 函数定期检查窗口的高度，并相应地调整相关元素（“iframecontent”）。

我减去固定高度页眉和页脚的一些偏移量。

When I needed such a functionality some years ago, I examined how Google Calendar did it.

Basically, they use a timer-driven JavaScript file that checks for the height of the window and adjust the height of a contained DIV tag accordingly (or of an IFRAME tag, just any container tag that you like).

Here is a code snippet from a page I worked on:

<script type="text/javascript"> 
    document.getElementsByTagName("body")[0].style.height = "100%";
    document.getElementsByTagName("html")[0].style.height = "100%";
    document.getElementsByTagName("body")[0].style.minHeight = "100%";
    document.getElementsByTagName("html")[0].style.minHeight = "100%";

    function height()
    {
       try
       {
          height_iframe();
       }
       catch(err)
       {
       }
    }
    window.onload=height;

    // --

    var ie6WorkaroundIFrameResize = 1;

    function height_iframe()
    {
       var any = false;
       var offset = 300;
       var c = document.getElementById("iframecontent");

       if ( c!=null )
       {
           c.style.height = (GetClientHeight()-offset)+"px";
           any = true;

           var d = document.getElementById("iframeie6");
           if ( d!=null )
           {
              d.style.height = (GetClientHeight()-(offset+ie6WorkaroundIFrameResize))+"px";
              any = true;

              ie6WorkaroundIFrameResize = 0;
           }
       }

       if ( any )
       {                                                                             
          setTimeout( 'height_iframe()', 300 );
       }
    }

    function GetClientHeight()
    {
       return document.documentElement.clientHeight;
    }
</script>

Basically, the script regularly checks for the height of the window via the GetClientHeight() function and adjusts the element in concern ("iframecontent") accordingly.

I subtract some offsets of fixed-height headers and footers.

回复收藏 0 原文

七秒鱼° 2024-10-04 18:57:54

据我所知，您需要通过 javascript 设置此 div 的大小。我建议使用 jQuery，这样：

//$(document).height() gives the size of the document 
//(as opposed to $(window).height() that would give the size of the viewport
$("div#overlay").css('height',$(document).height());

AFAIK you would need to set the size of this divthrough javascript. I would recommend using jQuery, in this way :

//$(document).height() gives the size of the document 
//(as opposed to $(window).height() that would give the size of the viewport
$("div#overlay").css('height',$(document).height());

回复收藏 0 原文

~没有更多了~