Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

css

height

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:

alt text

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!

like image 461
LocustHorde Avatar asked Oct 15 '10 13:10

LocustHorde


2 Answers

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.

like image 88
iamserious Avatar answered Sep 21 '22 18:09

iamserious


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

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

like image 23
Splashdust Avatar answered Sep 23 '22 18:09

Splashdust