Take the 2-minute tour ×

I have a page where while the page loads, I put an absolute DIV over all of my content with "height:100%" that states "the page is loading...".

However, it appears from the scrollbar that the height of the page is 100% + the height of the content.

This immediately goes away once the page loads and the overlay absolute positioned DIV is set to display:none.

This happens in Firefox 3, Chrome, IE6.

Any ideas on how to make height:100%, just 100% and not more?

     <style type="text/css">
         * html, * body {height: 100%; margin: 0; padding: 0}
    		#message {background: black; height: 100%; left: 0; opacity: 0.15; position: absolute; top: 0%; width: 100%}
    		#loading {height: 100%; left: 0; position: absolute; top: 45%; width: 100%; z-index: 2}
    		#loading p {background: white; border: 2px solid #666; width: 180px}
     <div id="grayout"></div>
     <div id="loading"><p>Page is loading...</p></div>
     <div id="content">
     // content is dynamically loaded into this div via AJAX

Update: it appears the problem is that I have "top:45%". How do move that DIV to the center of the page (since it's a "page is loading message") without causing this same problem all over again?

share|improve this question
Note that * body triggers all browsers and not just the IE. –  Gumbo May 8 '09 at 16:12
Can you add the HTML and any other CSS you're using. –  tspauld May 8 '09 at 16:35
I tried the html in the question and didn't see any weird issues with scrollbars or content height. –  Mr. Shiny and New 安宇 May 8 '09 at 16:48
Never said it was an IE specific problem. Said it happens in Firefox 3, Chrome and IE6 ... the browsers I have access too. –  Kirk9233 May 8 '09 at 16:55

8 Answers 8

up vote 8 down vote accepted

If that element has vertical padding or margin, it’s added to the height of the block according to the CSS specification (see the visual formatting model for absolutely positioned, non-replaced elements).

Edit   The top:45% is moving your element 45% down. Remove it (top:0) or set the element’s height to auto (default value).

share|improve this answer
Nope, doesn't work –  Kirk9233 May 8 '09 at 16:36
Well then we need some code or the page itself to see what’s causing this behavoir. –  Gumbo May 8 '09 at 16:36
Code is posted above –  Kirk9233 May 8 '09 at 16:40
You're right, the "top:45%" is the cause of the problem. How do I move that DIV down the page so that it's not at the top without causing the same problem as before? –  Kirk9233 May 8 '09 at 16:51
I figured it out, by removing the height:100% from the #loading DIV makes it work –  Kirk9233 May 8 '09 at 16:57

Have you tried:


Which should remove all padding and margins from the page as well.

share|improve this answer
I've set padding/margin to 0 - still same problem –  Kirk9233 May 8 '09 at 16:30
This is the right answer. The height:100% on the html and body will cause these to fill 100%, which means the div which the body contains can go 100%. With just the margin/padding, it won't work. –  jlarson May 8 '09 at 16:38

Try adding

overflow: hidden;
share|improve this answer
That doesn't work because my content is longer than a page long. So by doing overflow:hidden - that makes the scrollbar disappear. –  Kirk9233 May 8 '09 at 16:24

Absolutely positioned elements are taken out of the flow of the page, so the div probably isn't being fitted behind the content. Why is the container div being absolutely positioned in the first place?

share|improve this answer

Almost always, I start my CSS with the following line:

* {padding:0; margin:0}

This should fix your issue.

share|improve this answer
I've set the padding/margin to 0 and this does not solve the problem –  Kirk9233 May 8 '09 at 16:30

Re: // A LOT of content is dynamically loaded via AJAX

Does any of the dynamic data have unbreakable lines, or perhaps images or text that would exceed the space?

share|improve this answer
"images that would exceed the space" - exceed what space? The "content" DIV grows and shrinks based on the amount of content. Much like this web page grows by the more answers that are posted. I'm confused –  Kirk9233 May 8 '09 at 16:39

Your "loading" div is the full height of the window, and it's positioned 45% from the top, so it overflows the window by 45%, giving you a scroll bar.

Try moving it to the top of the page and centering the text vertically.

share|improve this answer

Ha posted HTML caused an issue without intro text..

     <div style="height: 100%; background-color: blue;"></div>
share|improve this answer

Your Answer

