HTML overlay height to cover entire visible page

Question

I have a web page that loads some stuff using AJAX. I want to display an overlay with a loading indicator while the loading is in progress, so that the user cannot interact with most of the page - except the menu at the top. I'm using jQuery and the jQuery BlockUI plugin to do this.

I call $(element).block() and it works fine, but the overlay only extends as far down as the current content of my page. As more content is loaded and added to the page the overlay moves down with it and this looks a bit ugly. Ideally I'd like it to cover the entire visible area of the page right from the start. A simple hack for doing this would be to set a large height value for the overlay, like this:

$(myElement).block({
        overlayCSS: {
            height: '10000px'
        }
 });

... but this creates a scrollbar! How do I avoid this and make it just the right height to cover the visible page, but not enlarge it?

score 24 · Answer 1 · edited Jun 19 '11 at 15:12

24

Use position: fixed; instead of position: absolute. This way the overlay will not move even if you scroll.

edited Jun 19 '11 at 15:12

axel22

32,045
9
125
137

answered Jun 19 '11 at 11:59

caruzko

241
2
3

1

Dude thanks for this answer. This problem was driving me crazy! – user875139 Apr 02 '13 at 18:31
position fixed is the solution, and if the page is using headers and footers dynamically loaded/added through another template, make sure to place the overlay div at right place so that it covers header and footer as well... – Waqas Memon Apr 27 '16 at 18:14

score 2 · Answer 2 · answered Mar 29 '10 at 01:31

2

In XHTML the html and body elements are not quite as magical as in HTML. The body element doesn't fill the viewport (window) automatically, it's size is only as tall as it's contents.

To make an element fill the window you first have to make the html and body elements fill the window:

html, body { height: 100%; }

Then you can use height: 100%; on an element in the body to make it cover the full height.

answered Mar 29 '10 at 01:31

Guffa

687,336
108
737
1,005

The explanation makes sense and it sounded promising, but doesn't quite work on my page. I think it's because it also uses jQuery UI tabs, dynamically loaded and I suspect that every element from down must have "height: 100%" set. – EMP Mar 29 '10 at 03:27

score 0 · Answer 3 · answered Feb 25 '14 at 16:12

I have made a complete example for you, now you can use that in your application and and just hide it after ajax request completed.

Click here!

<div class="overlay"></div>
<div id="container">
    content Whatever you want even you can delete this container
<div>

score 0 · Answer 4 · answered Mar 29 '10 at 01:28

0

Set position to absolute and height to 100%.

answered Mar 29 '10 at 01:28

Daniel A. White

187,200
47
362
445

score 0 · Answer 5 · edited Jun 14 '17 at 11:40

The following code ended up working for me:

$("body").block({
  message: '<h2>Loading...</h2>',
  overlayCSS: {
    position: 'absolute',
    top: '0',
    bottom: '0',
    left: '0',
    right: '0'
  }
});

body {
  color: #004A6E;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

I used the following post as a reference: Make div 100% height of browser window the one modification that I had to do was adding left and right. My overlay was covering only the half of the screen.

score 0 · Answer 6 · edited Aug 11 '16 at 20:49

Worked for me! I changed absolute to fixed.

function showWaitPopup() {
  var obj = document.getElementById('bkdiv');
  if (obj) {
    obj.style.display = 'block';
  }
  return true;
}

showWaitPopup();

div.bkdiv {
  background-color: #000000;
  opacity: 0.6;
  filter: alpha(opacity=60);
  z-index: 2000;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 200%;
  display: none;
}

<div class="bkdiv" id="bkdiv"></div>

HTML overlay height to cover entire visible page

6 Answers6

Linked