StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POhow to fill div with full height of page in css? (page is taller than 100%) for ajax loading gif background
text
Body
copied!<p>ok there are several similar questions but not quite anything that I want. </p> <p>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. </p> <p>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.</p> <p>I made the div with css like this: </p> <pre><code>.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; } </code></pre> <p>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.</p> <p>Here is an example mockup of the problem I made to quickly demonstrate: </p> <p><img src="https://i.stack.imgur.com/H57jT.png" alt="alt text"></p> <p>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.</p> <p>How to make this divLoadingBackground div to fill out the entire length of the page?</p> <p>Many thanks for any help. If you need any additional info, please comment!</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload