How to Make a ≪Div≫ Always Full Screen

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

get a div to fill the whole screen without position absolute or relative

You can use width: 100vw; height: 100vh

This means it will take whole viewport height and width

How to make div height and width to full screen with specific margin without scroll

Option 1: use calc():

body {  margin: 0;}div {  height: calc(100vh - 20px);  width: calc(100vw - 20px);  margin: 10px;  background-color: red;}

<div></div>

content div always to take 100% screen height with css

Try vh unit.

.container{
    min-height:100vh;
}

Make body fill entire screen?

html, body {
    margin: 0;
    height: 100%;
}

How to create a div that occupy the whole screen and folds to an header when scrolling

If you want the div below the nav to span the remaining height use height: calc(100vh - 69px) where 69px can be the height of any fixed height object.

body {  margin: 0;}
.container {  width: 100%;  height: 100vh;  position: relative;}
.fixed-nav {  width: 100%;  height: 69px;  background-color: red;  color: white;  position: fixed;  top: 0;  left: 0;  z-index: 1000;}
.header {  width: 100%;  height: calc(100vh - 69px);  position: absolute;  left: 0;  bottom: 0;  background-color: red;  z-index: 1;  margin: 0;}
.more-content {  height: 100vh;  width: 100%;  margin: 20px;}

<div class="container">  <nav class="fixed-nav">NAV</nav>  <header class="header"></header></div><div class="more-content">Rest of webpage</div>