<tutorialjinni.com/>

Set Div height to 100 Percent of Body height

Posted Under: CSS3, HTML5, Tutorials on Dec 23, 2016
This tutorial is about setting the Div height to 100% of the body or the window of the browser. There are two different pure CSS approaches shown here....

Method 1

First is by using latest CSS3 and HTML5 measurement unit vh, which stands for Viewport Height. The scale of vh is 
1vh = 1% or Viewport's height
so to set it to 100 percent of body height value of vh will be 100. The CSS will be like 
<style>
.subjectdiv {
    height : 100vh;
}
</style>
A complete example 
<!DOCTYPE html>
<html>
<head>
    <title>Make div 100% height of browser window</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body{
            padding: 0;
            margin: 0;
        }
        #left, #middle, #right{

          height: 100vh;

          width: 33%;
          float: left;
          text-align: center;
          color: #ffffff;
          vertical-align: middle;
          display: inline-block;
        }
        #left {
          background-color: #96ceb4;  
        }
        #middle {
          background-color: #ff6f69;  
        }
        #right {
          background-color: #ffcc5c;  
        }
    </style>
</head>
<body>
    <div id="left">
        Content of DIV # 1
    </div>
    <div id="middle">
        Content of DIV # 2
    </div>
    <div id="right">
        Content of DIV # 3
    </div>
</body>
</html>
when you run it in the browser it will be like the below image.

Div height 100 percent using vh

Method 2

The second method involves giving body and the html tag a height of 100% and then give 100% height to our div(s). A simple CSS will be 
<style>
body, html {
  height: 100%;
}
.subjectdiv {
    height:100%;
}
</style>
Full source code is as follows 
<!DOCTYPE html>
<html>
<head>
    <title>CSS div height 100 percent of body</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body, html {

          height: 100%

          padding: 0px;
          margin: 0px;
        }
        #left, #middle, #right{

          height: 100%

          width: 33%;
          float: left;
          text-align: center;
          color: #ffffff;
          vertical-align: middle;
          display: inline-block;
        }
        #left {
          background-color: #009688;  
        }
        #middle {
          background-color: #35a79c;  
        }
        #right {
          background-color: #54b2a9;  
        }
    </style>
</head>
<body>
    <div id="left">
        Content of DIV # 1
    </div>
    <div id="middle">
        Content of DIV # 2
    </div>
    <div id="right">
        Content of DIV # 3
    </div>
</body>
</html>
This is when rendered in the browser it will be something like

100 percent height of div
Both of these methods works perfectly well in all major modern browsers. The code wont break when the browsers were resized.


imgae