Why doesn't height: 100% work to expand divs to the screen height?

HTML Web Development Front End Technology

To set the height to 100% for expanding divs to the screen height, set the entire document to −

html {
   height: 100%;
}

First, we have set both the html and body to −

html, body {
   height: 100%;
}

The div is set with height and min-height property −

#mydiv {
   min-height: 100% !important;
   height: 100%;
   border: 2px solid yellow;
   width: 200px;
   background: orange;
}

Under the <body>, we have our div for which we set the CSS property above −

<div id=mydiv>
   Demo Text
</div>

Example

Let us now see the complete example −

<html>
<head>
    <title>Example</title>
    <style>
      html, body {
         height: 100%;
      }  
      #mydiv {
         min-height: 100% !important;
         height: 100%;
         border: 2px solid yellow;
         width: 200px;
         background: orange;
      }
   </style>
</head>
<body>
   <div id=mydiv>
      Demo Text
   </div>
</body>
</html>