代码之家 › 专栏 › 技术社区 › LocustHorde

如何在css中用页面的全高填充div?(页面高于100%)用于ajax加载gif背景

height css

LocustHorde · 技术社区 · 14 年前

好吧,有几个类似的问题,但不是我想要的任何东西。

我在页面上很少有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;
    }

下面是我为快速演示而制作的问题模型示例:

alt text

如您所见,我以SO为例进行了模拟;图1显示,当它出现时,一切正常。图2显示,它与滚动页面一起向上移动。

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

非常感谢你的帮助。如果你需要任何额外的信息,请评论!

5 回复 | 直到 14 年前

iamserious 14 年前

我在你的css中看不到的一件事是z-index。不过,修复了这个问题,有时,根据其他div的位置,divloadingbackgrounddiv可能会在其中一个div中结束。

尝试添加

z-index: 9999;

Splashdust 14 年前

会把这个放在评论里,但我的评价似乎太低了。

另外,您确定其他css指令没有将position属性更改为absolute或其他内容吗?

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

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

Brad 14 年前

我相信您需要JavaScript/jQuery动态地将有问题的div的高度设置为页面呈现后的高度。

Uwe Keim Tomasz 14 年前

几年前当我需要这样一个功能时,我检查了 Google Calendar 做到了。

下面是我处理过的一个页面的代码片段:

<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”)。

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

tsimbalar 14 年前

恐怕你得把这个尺寸定下来 div 通过javascript。我建议使用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());