How to make a div 100% height of the browser window?

The problem:

You have an HTML page. It has a “div” block element with few texts which doesn’t fill the height of the browser window. Now you need to make sure that div will take 100% height of browser window.

Solution:

There are many solutions regarding this problem.

1. Make 100% both html, body and div
The Code:

<!DOCTYPE html>
<html>
<head>
  <meta charset=”utf-8”>
  <title>100% height</title>
  <style type="text/css">
    html, body {
       height: 100%;
       margin: 0px;
    }
    div{
       height: 100%;
       background: gray;
    }
  </style>
</head>
<body>
   <div>This is a simple test for experiment</div>
</body>
</html>

[wpdm_file id=174]
Explanation:
When you set the height of the div to 100%, it doesn’t mean that it is 100% to the browsers window. It means that its height is 100% relative to parent element’s height. So you need to set the height of the parent element to 100% in order to make 100% div of the browser window. There are two parent elements <html> and <body> for div. The default value of height property is “auto” (means height is as long as the div element). So first set the height of <body> and <html> element to 100% and then set the height of “div” to 100%. This way the “div” gets the height of the browser window. margin property sets to 0 means the page has no margin.

2. The value of height of div sets 100vh
Change the style of html written above.
The code

<style type="text/css">
body {
    margin:0;
     }
div {
    height:100vh;
    background: gray;
      }
</style>

[wpdm_file id=175]
Explanation:
1vh(viewport height)=1% of browser’s height. So 100vh means that it takes 100% height of the browser window. Vh isn’t related to the parent element. It is directly related to browser window.
More about Viewport:

Viewport is a new feature of CSS3. So all the latest version of browser support it without Opera mini and android browser.
100vh is different from 100%
The code:
```
<body style="height:100%">
    <div style="height:200px">
        <p style="height:100% ">Hello, world!</p>
    </div>
</body>
```
Here, the height of “p” tag set to 100% and div to 200px. It means that the height of the “p” is 100% relative to the height of “div”. 100% of 200px is 200px. So the height of the “p” is 200px. It doesn’t mean “p” is the 100% of body. But if 100vh is used instead, it means that “p” tag will be 100% height of the browser’s height regardless of div and body height.

3. Set the position to absolute and set top, bottom to 0 inside the div in CSS.
The code:

div {
    position: absolute;
    top: 0;
    bottom: 0;
    background: gray;
}

[wpdm_file id=176]
Explanation:
The “position” property sets to “absolute” means the element which hold the property is relative to the nearest positioned element. Since there is no positioned element with “div” (there is no another div or block element other than div), “div” element uses browser window. The value of top, bottom indicates how much far from the browser’s top, bottom edge respectively. As the value of these sets to 0, it means that “div” fits to the edge of top and bottom of browser that is the page takes 100% height of the browser.

4. Use height: 100%; display: flex on the body and html on the div elements
The code:

html, body {
  height:100%;
  margin:0;
}
body{
  display: flex;
}
div {
  background: gray;
}

[wpdm_file id=177]
Explanation:
Flexbox method lets the html page to modify the height or width of its child elements (elements which placed inside other element is child element). Here “display:flex” property in the “body” declares that flexbox method is applied to modify the child element of the “body”. When the value of the height of the html and body set to 100%, it means that “body” sets the height to 100% for its child elements. Here is only one element “div” inside the “body”, so it takes 100% height of the browser window.
N.B: The flexbox method is new in CSS3. So some old browsers don’t fully support the feature.