How to make <div> cover whole page and not only viewport

Question

I'm trying to make a div cover my whole page. Currently, the problem is that it is only covering the size of the viewport (for example 1920x1080px).

That's the CSS for the div I'm using at the moment:

    #cursor-container {
      position: absolute;
      z-index: 99999;
      pointer-events: none;
      overflow-x: auto;
      background-color: rgba(0, 0, 0, 0.25);
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      height: 100%;
      width: 100%;
    }

At the moment, it looks like this:

But it should look like this:

How can I fix this?

Answer 1

First, make sure that the div you are using is the child of the body element, then change the position to position: fixed;:

#cursor-container {
  position: fixed;
  top: 0;
  left: 0;

  margin: 0;
  padding: 0;

  height: 100%;
  width: 100%;

  z-index: 99999;
  pointer-events: none;
  overflow-x: auto;
  background-color: rgba(0, 0, 0, 0.25);
}

This will make sure that your div stays fixed at the screen even if the page scrolls down and it will cover the whole screen

Also, set the parent's width and height to 100% as well:

html, body {
  width: 100%;
  height: 100%;
}