如何在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背景