How to Make a Div Adopt The Height of The Screen

How can I make a div adopt the height of the screen?

You need the body and html elements to have 100% height as well.

Try the following CSS:

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

YourDivSelector {
    height: 100%;
}

The margin and padding must be set to 0 to prevent autoscroll in Firefox.

Can I make my div inherit height and position from one div and width from another?

It's possible to force a div to fill the whole viewport width using vw. It's a bit weird though:

body,html {    margin: 0;    padding: 0;}
.outer {    width: 300px;    height: 300px;    background-color: #eeeeee;    margin: 0 auto;    position: relative}
.inner {    width: 100vw;    height: 100%;    background-color: rgba(0, 0, 0, 0.1);    position: absolute;    left: 50%;    top: 50%;    transform: translate(-50%, -50%);}

<div class="outer">    <div class="inner"></div></div>

How to let div inherit the width and height of the browser window

You were almost there! You forgot to declare the height: 100%; on the body and the html tag.

Since you only declared it on the body tag it has no idea what 100% height is since it's parent, html, has no set height.

Here is the css I changed:

body, html {
    margin:0;
    padding:0;
    line-height: 1.5em;
    height: 100%;
    width: 100%;
}

#maincontainer {
    height: 100%;
}

Finally, a fiddle: Demo

I would also suggest improve the structure of your html.

Here is a fiddle to show how to clean up your structure, Demo.

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>

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>

How to force child div to be 100% of parent div's height without specifying parent's height?

NOTE: This answer is applicable to legacy browsers without support for the Flexbox standard. For a modern approach, see: https://stackoverflow.com/a/23300532/1155721

I suggest you take a look at Equal Height Columns with Cross-Browser CSS and No Hacks.

Basically, doing this with CSS in a browser compatible way is not trivial (but trivial with tables) so find yourself an appropriate pre-packaged solution.

Also, the answer varies on whether you want 100% height or equal height. Usually it's equal height. If it's 100% height the answer is slightly different.

React cannot set div to take 100% of screen height

You can use 100vh (1vh is relative to 1% of the height of the viewport):

function App() {
  return (
    <div style={{ minHeight: "100vh", background: "red" }}></div>
  );
}
ReactDOM.render(
  <App />,
  document.getElementById("root")
);

html,
body {
  padding: 0;
  margin: 0;
}

<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>

<div id="root"></div>

In CSS, how can I make a div as high as the entire page?

SAMPLE FIDDLE: http://jsfiddle.net/apTFp/

div{
    position:absolute;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    background-color:#eeeeee;
}

This should work :)