Allow a div to cover the whole page instead of the area within the container

Solution 1:

Add position:fixed. Then the cover is fixed over the whole screen, also when you scroll.
And add maybe also margin: 0; padding:0; so it wont have some space's around the cover.

#dimScreen
{
    position:fixed;
    padding:0;
    margin:0;

    top:0;
    left:0;

    width: 100%;
    height: 100%;
    background:rgba(255,255,255,0.5);
}

And if it shouldn't stick on the screen fixed, use position:absolute;

CSS Tricks have also an interesting article about fullscreen property.

Edit:
Just came across this answer, so I wanted to add some additional things.
Like Daniel Allen Langdon mentioned in the comment, add top:0; left:0; to be sure, the cover sticks on the very top and left of the screen.

If you want some elements to be at the top of the cover (so it doesn't cover everything), then add z-index. The higher the number, the more levels it covers.

Solution 2:

You need to set the parent element to 100% as well

html, body {
    height: 100%;
}

Demo (Changed the background for demo purpose)

Also, when you want to cover entire screen, seems like you want to dim, so in this case, you need to use position: fixed;

#dimScreen {
    width: 100%;
    height: 100%;
    background:rgba(255,255,255,0.5); 
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100; /* Just to keep it at the very top */
}

If that's the case, than you don't need html, body {height: 100%;}

Demo 2

Solution 3:

This will do the trick!

div {
  height: 100vh;
  width: 100vw;
}