Home/ Questions/Q 219849
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T18:53:00+00:00

I have a page where while the page loads, I put an absolute DIV

  • 0

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?

<html>
  <head>
     <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}
     </style>
  </head>
  <body>
     <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
     </div>
  </body>
</html>

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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).

    • 0