Css div 100% height

Last updated on February 25, 2018

This tutorial will show you how to set 100% full height div with CSS with simple lines.

The percentage (%) is a relative unit so the resulting height depends on the height of parent element’s height.
So we must set HTML and body elements height to 100%, so the resulting height of container div becomes equal the 100% height of the browser window.

html, body {
  height: 100%;
}

After that, set the full 100% height to your container(which you want 100% height)

div.content {
  height: 100%;
}

Your final complete code would look like this :

    
    
    
    
    
    
    
        
The height of this DIV element is equal to the 100% height of its parent element's height.