Get a Div to Go Across The Whole Page

Get a div to go across the whole page

You have to set margin and padding of body element to 0. Like this (in CSS):

body
{
  margin: 0;
  padding: 0;
}

And also remember about setting margin of div element to 0.

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

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.

Making a div that covers the entire page

Use position:fixed this way your div will remain over the whole viewable area continuously ..

give your div a class overlay and create the following rule in your CSS

.overlay{
    opacity:0.8;
    background-color:#ccc;
    position:fixed;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
    z-index:1000;
}

Demo: http://www.jsfiddle.net/TtL7R/1/

How to make div cover whole page and not only viewport

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%;
}

How to make a div cover the whole screen

You could use viewport height as your height value:

.main {    height: 100vh;    background-color: green;}

<div class="main">  CONTENT</div>

div.bottom-nav {
  background-color: #232323;
  width: 100%;
  height: 55px;
  line-height: 55px;
  text-align: center;
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0);
}
a {
  color: white;
}

<div class="bottom-nav"><a href=#>Click me</a>
</div>