如何在CSS中填充页面的高度？（页面高于100％）阿贾克斯加载gif背景

好吧，有几个类似的问题，但没有什么我想要的。如何在CSS中填充页面的高度？（页面高于100％）阿贾克斯加载gif背景

我在页面上有很少的Ajax请求，我想在屏幕中心显示图像，它的所有工作正常。

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

我犯了这样的用CSS股利：

.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显示它在滚动页面上移动。我是c＃开发人员，css和我的拉丁文一样陌生。

如何使这个divLoadingBackground div来填写页面的整个长度？

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

来源

2010-10-15 LocustHorde

'position：fixed' should do the trick。你确定你没有使用'绝对位置'吗？ – 2010-10-15 14:07:55

这个C＃如何关联？ – BlackICE 2010-10-15 14:13:03

@David - 我从来没有说过它的C＃相关的先生！ – LocustHorde 2010-10-15 14:17:33

有一件事我没有看到你的css是z-index。虽然修正了这个问题，但有时候，根据其他div的定位，你的divLoadingBackground div可能会在其中一个div中结束。

尝试添加

z-index: 9999;

或类似的东西，看看它是否工作。

来源

2010-10-15 14:21:49 iamserious

奇怪，加入z-index工作！你先生，是个天才！非常感谢！ – LocustHorde 2010-10-15 14:24:38

我相信你会需要使用Javascript/jQuery来div的问题的高度动态设置为一次呈现在页面的高度。

如果您正在进入网络世界，现在是时候学习新的语言“CSS”以及perpahs--并不十分令人生畏的JavaScript。

来源

2010-10-15 14:01:57 Brad

谢谢，我想我也可能会开始学习CSS。我对JavaScript感到满意，而且我非常喜欢JQuery。 CSS并不是我有一颗心来包裹我的头！ – LocustHorde 2010-10-15 14:19:13

@Locust，看看好的一面：CSS只是由浏览器的JavaScript引擎解析的文本。当然，这解释了很多关于IE为何如此不符合规定的痛苦。 – Brad 2010-10-15 14:22:13

几年前当我需要这样的功能时，我检查了Google Calendar是如何做到的。

基本上，它们使用计时器驱动的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”）因此。

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

来源

2010-10-15 14:05:04

哇，那个，先生，对于像高度这么简单的东西来说很复杂！ – LocustHorde 2010-10-15 14:19:50

它看起来很复杂，但它的基础是根据窗口大小调整大小（尽管在计时器上并且非常安全）。我开发了一个项目，开发人员做了一些类似于强制主窗口可以滚动的页面，底部始终可见页脚。我后来修改了调整大小功能的需要。 – Brad 2010-10-15 14:24:52

是的。其实，仅仅因为你（我也是）认为它应该简单，并不意味着简单;-)。 – 2010-10-15 14:25:21

AFAIK你需要通过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());

来源

2010-10-15 14:08:56 tsimbalar

本来可以在评论中提到这一点，但似乎我的代表太低评论。

位于DOM树中的.divLoadingBackground div在哪里？由于它有固定的位置，它不应该随页面一起滚动。这让我相信元素嵌套太深。尝试把它放在页面的正文级别，看看是否有帮助。

另外，你确定一些其他的css指令没有改变位置属性为绝对或某些东西吗？

此外，请务必使用正确的DOCTYPE。这对固定位置元素有一定的影响。

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

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

来源

2010-10-15 14:09:06 Splashdust

我知道，大家最喜欢的小魔鬼IE6很可爱，他不是吗？ – LocustHorde 2010-10-15 14:22:54

我认为我的问题是这样的，并且正如所选答案指出的那样，z-index解决了这个问题，谢谢！ – LocustHorde 2010-10-15 14:28:22

如何在CSS中填充页面的高度？ （页面高于100％）阿贾克斯加载gif背景

回答

相关问题

如何在CSS中填充页面的高度？（页面高于100％）阿贾克斯加载gif背景