How to Make a DIV 100% of the Window Height using CSS

CSS Web Development Front End Technology

The CSS height property helps us specify the height of an element.

Syntax

The syntax of CSS height property is as follows −

Selector {
   height: /*value*/
}

Example

The following examples illustrate CSS height property.

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <title>Page Title</title>
      <style>
         html, body {
            margin: 0px;
            height: 100vh;
         }
         div {
            height: 100%;
            text-align: center;
            background: mistyrose;
         }
      </style>
   </head>
   <body>
      <div>100% height!!</div>
   </body>
</html>

Example

This gives the following output

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <title>Page Title</title>
      <style>
         html, body {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            margin: 0px;
            height: 100vh;
            box-shadow: inset 0 0 40px lightblue;
         }
         div {
            width: 40%;
            height: 100vh;
            text-align: center;
            box-shadow: inset 0 0 20px lightcoral;
         }
      </style>
   </head>
   <body>
      <div>Watch This!</div>
      <div>Let Me Show You How The Boss Does It!!</div>
      <div>Open Up The Sky!!</div>
      <div>GO! GO! GO!!</div>
   </body>
</html>

This gives the following output