Geek Answers Handbook

How to fill a div with full page height in css? (page above 100%) for ajax loading gif background

ok there are a few similar questions, but not exactly what I want.

I have several ajax requests on the page and I want to show the image in the center of the screen and everything works OK.

To make it more visible, I wanted to place this image on a div with a translucent background, so it is more obvious to end users. Now comes the hard part.

I made a div with css as follows:

.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 in order or, I would say, it fills the viewport. If I scroll down the page, the page will be normal again. I want this div to cover the entire length of the page, no matter how long the page will be.

, , :

alt text

, SO ;) 1 , , . 2 , . # css, , .

divLoadingBackground div ?

. , , !

+5
5

, css, - z-index. , , , , , divs, divLoadingBackground div div.

z-index: 9999;

- , .

+3

, , , .

div.divLoadingBackground, DOM? , . , . , .

, , - css position -?

, DOCTYPE. .

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

, , , IE6 .

+3

, JavaScript/jQuery, div .

, , "CSS", perpahs- -- JavaScript.

0

, , 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>

, script GetClientHeight() ( "iframecontent" ).

I subtract some fixed-height headers and footers offsets.

0
source

AFAIK you will need to set the size of this divvia javascript. I would recommend using jQuery 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
source

More articles:


All Articles