Making a Div That Covers the Entire Page

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 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>

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 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 do I make a div full screen?

When you say "full-screen", do you mean like full-screen for the computer, or for taking up the entire space in the browser?

You can't force the user into full-screen F11; however, you can make your div full screen by using the following CSS

div {width: 100%; height: 100%;}

This will of course assume your div is child of the <body> tag. Otherwise, you'd need to add the following in addition to the above code.

div {position: absolute; top: 0; left: 0;}

How to make a div that covers the all area of the screen except the area covered by a fixed div?

I don't think you make <div> like you shown in the image. But I have a suggestion. Both the elements in the below div are rectangle. but the content behaves like you drawn.

You can look up CSS Basics here

div{  margin: 0;  background: green;}.small{  float:left;  width:20%;  height: 100px;  background: yellow;}

  <div class="small">Lorem ipsum dolor sit amet, consectetur adipiscing elit. .</div>  <div class="big">Aenean euismod eros et erat pharetra, at elementum odio suscipit. Cras a enim quis diam molestie sollicitudin eget ac est. Proin porta turpis a massa porta laoreet. Fusce semper facilisis erat nec suscipit. Aliquam gravida quis dui sed aliquet. Ut consequat ullamcorper volutpat. Cras neque tortor, pharetra id condimentum nec, accumsan ac ipsum.
Etiam sit amet convallis ante. In pulvinar eu erat eu fringilla. Nam scelerisque eget ligula a blandit. Nullam eu tortor augue. Nulla at eros arcu. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque eget tincidunt massa. Sed dictum faucibus risus ac varius. Praesent aliquet erat tortor, sed lacinia metus fermentum non. Nulla vitae sapien dui. Vestibulum sed urna quis ex dictum scelerisque id ut erat. Cras efficitur ligula eu neque pellentesque, eget posuere lacus aliquet. Pellentesque interdum at sem vitae aliquet. Donec cursus, elit et varius viverra, urna erat commodo sem, ac congue erat augue eget ex. Suspendisse posuere sem at tempor faucibus. Aliquam erat volutpat.
Curabitur aliquam feugiat tortor vitae blandit. Quisque faucibus urna arcu, sed rhoncus quam rutrum scelerisque. Aliquam pulvinar condimentum accumsan. Etiam lorem nibh, porta vitae mauris sit amet, egestas interdum lectus. Proin sit amet dolor purus. Nunc sed sem sed purus sagittis congue iaculis sed mauris. Donec pellentesque ut dolor rhoncus iaculis. Donec quis magna accumsan turpis convallis dignissim. Integer vel nisl accumsan, ultrices augue ut, placerat eros. Phasellus eu lacinia elit, nec maximus dui.</div>

how to develop 2 div's that covers 100% of screen size CSS3 - Horizontally

Simply use flex and you don't have to worry about the fixed size element. By specifying 100vh to body you fill the whole screen and by adding flex:1 to the last div it will cover all the remaining area left by the first one.

body{  margin:0;  padding:0;  height:100vh; /* or simply use height:100% with body and html */  display:flex;  flex-direction:column;}.area1{  height:120px;  background:pink;}.area2{  flex:1;  background:lightblue;}

<div class="area1">abc</div><div class="area2">123</div>

Making a Div That Covers the Entire Page