Allow a Div to Cover the Whole Page Instead of the Area Within the Container

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.

Make a DIV cover entire page, but WITHOUT using CSS position

What about using viewport height and viewport width?

I've created an example in this JSFiddle.

body, html {

    margin: 0;

    padding: 0;

}

div {

    width: 100vw;

    height: 100vh;

}

.one {

    background-color: blue;

}

.two {

    background-color: green;

}

.three {

    background-color: yellow;

}

<div class="one"></div>

<div class="two"></div>

<div class="three"></div>

How to cover a div with another div as overlay

take the both div inside a root div.Then set the root div position:relative and overlay div absolute. fix the height and width. and apply display:bloCK on overlay div. If still does not work than apply z-index.

This should be like:
HTML:

<div class="parent">
     <div id="area" class="area"></div>
     <div class="area cover"></div>
</div>

CSS:

.parent{
  position: relative;
  height:200px;
  width: 200px;
}
.cover{
  position: absolute;
  height: 100%;
  width: 100%;
  display: block;
  z-index: 999;
}

Hopefully this will work for you.

Make Div overlay ENTIRE page (not just viewport)?

The viewport is all that matters, but you likely want the entire website to stay darkened even while scrolling. For this, you want to use position:fixed instead of position:absolute. Fixed will keep the element static on the screen as you scroll, giving the impression that the entire body is darkened.

Example: http://jsbin.com/okabo3/edit

div.fadeMe {
  opacity:    0.5; 
  background: #000; 
  width:      100%;
  height:     100%; 
  z-index:    10;
  top:        0; 
  left:       0; 
  position:   fixed; 
}

<body>
  <div class="fadeMe"></div>
  <p>A bunch of content here...</p>
</body>

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>

How to make the main content div fill height of screen with css

These are not necessary

remove height in %
remove jQuery

Stretch div using bottom & top :

.mainbody{
    position: absolute;
    top: 40px; /* Header Height */
    bottom: 20px; /* Footer Height */
    width: 100%;
}

check my code : http://jsfiddle.net/aslancods/mW9WF/

or check here:

body {

    margin:0;

}

.header {

    height: 40px;

    background-color: red;

}

.mainBody {

    background-color: yellow;

    position: absolute;

    top: 40px;

    bottom: 20px;

    width:100%;

}

.content {

    color:#fff;

}

.footer {

    height: 20px;

    background-color: blue;

    

    position: absolute;

    bottom: 0;

    width:100%;

}

<div class="header" >

     

</div>

<div class="mainBody">

     

    <div class="content" >Hello world</div>

</div>

<div class="footer">

     

</div>

Allow a Div to Cover the Whole Page Instead of the Area Within the Container