how to fill div with full height of page in css? (page is taller than 100%) for ajax loading gif background

Question

Hi Guys,

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:

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!

Answer 1

I believe you will need JavaScript/jQuery to dynamically set the height of the div in question to the height of the page once rendered.

And if you're entering the world of web, it's time to learn that new language "CSS" as well as perpahs-not-quite-as-daunting JavaScript.

Answer 2

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.

Answer 3

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());

Answer 4

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"&gt;

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

Answer 5

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.