Best IT Recipes

How to make a div on 100% of the page (not the screen)?

I am trying to use CSS to create a "greyed out" effect on my page while the loading field is displayed in the foreground while the application is running. I did this by creating a 100% height / width, translucent black div that has visibility turned on / off via javascript. I thought it would be simple enough; however, when the content of the page expands to such an extent that the screen scrolls, scrolling to the foot of the page shows the part that is not grayed out. In other words, 100% at div height seems to relate to the browser viewport size, not the actual page size. How can I extend the div to cover the entire content of the page? I tried using jQuery.css ('height', '100%') before switching its visibility, but that doesn’t change anything.

This is the CSS of the corresponding div:

div.screenMask { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 1000; background-color: #000000; opacity: 0.7; filter: alpha(opacity=70); visibility: hidden; }

Thank.

+49
html css
Jun 16 '09 at 19:56
source share
5 answers

If you change position: absolute to position: fixed , it will work in all browsers except IE6. This captures the div in the viewport, so when scrolling it does not go out of view.

You can use $(document).height() in jQuery to make it work in IE6 too. For example.

 $('.screenMask').height($(document).height());

This will obviously be fixed for all other browsers, but I prefer not to use JavaScript if I can avoid it. You will need to do the same for the width, in fact, if there is horizontal scrolling.

There are many hacks to do fixed positioning work in IE6 , but they tend to either impose some other restrictions on your CSS or use JavaScript, so they probably aren’t worth the trouble.

In addition, I assume that you have only one of these masks, so I would suggest using an identifier for it instead of a class.

+49
Jun 16 '09 at 20:02
source share

I understand that I answer this long, long after being asked, but I landed here after I briefly dwelled on this problem, and none of the current answers are correct.

Here is the correct answer:

 body { position: relative; }

What is it! Now your item will be positioned relative to the <body> , and not the viewport.

I would not worry about position: fixed , as its browser support remains spotty. Safari before iOS 5 did not support it at all.

Note that your <div> element will span the <body> border-box (box + padding + border), but it will not cover its margin. Compensate by setting negative positions on the <div> (e.g. top: -20px ) or by removing the <body> marker.

I would also recommend setting <body> to height: 100% to ensure that you never end up in a partially hidden viewport on a shorter page.

Two valid points taken from previous answers. As Ben Blank says, you can lose the width and height declarations by positioning all four corners instead. And the Mercator is right that you should use an identifier instead of a class for such an important separate element.

This leaves the following recommended full CSS:

 body { position: relative; margin: 0; } #screenMask { position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 1000; background-color: #000; opacity: 0.7; filter: alpha(opacity=70); visibility: hidden; }

And HTML:

 <body> <div id="screenMask"></div> </body>

I hope this helps someone else!

+15
Aug 16 '12 at 3:32
source share
 div.screenMask { position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; z-index: 1000; background-color: #000000; opacity: 0.7; filter: alpha(opacity=70); visibility: hidden; }

By setting all top , bottom , left and right , the height and width are calculated automatically. If screenMask is a direct child of the <body> element and the standard window model is in effect (i.e. quirks mode has not been started), this will cover the entire page.

+3
Jun 16 '09 at 20:26
source share

If you want a pop-up window with an overlay effect, you can use this step.

 <style> .overlay{ background:#000; opacity:0.5; position:fixed; z-index:1; width:100%; height:100%; } .popup{ width:500px; margin:auto; position:fixed; z-index:2; height:300px; } </style> <div class="overlay"></div> <div class="popup"> Hello everyone </div>
+2
Sep 18 '14 at 12:43 on
source share

If you use jQuery to set the height in front of the popup, I assume it is normal to add some more javascript :)

You can set the div height on the scrollHeight of the .body document - this way it should cover the whole body. You need to add extra tricks to make sure that he continues to cover the body if something beneath him decides to grow.

+1
Jun 16 '09 at 20:05
source share


More articles:


All Articles