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?
-
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 toauto(default value).Gumbo : Well then we need some code or the page itself to see what’s causing this behavoir. -
Try adding
overflow: hidden; -
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?
-
Have you tried:
* html, * body {height: 100%; margin: 0; padding: 0;}Which should remove all padding and margins from the page as well.
larson4 : 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. -
Ha posted HTML caused an issue without intro text..
<html> <head> </head> <body> <div style="height: 100%; background-color: blue;"></div> </body> </html> -
Almost always, I start my CSS with the following line:
* {padding:0; margin:0}This should fix your issue.
-
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?
-
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.
0 comments:
Post a Comment