Hello Readers,

Today will discuss the possible way to make div height 100% according to screen size. Let's see about the first method -

So, below is the CSS code -

html, body{
    height: 100%;
}
.box{
    height: 100%;
    background: green;
}

How it works -

HTML and body tag in HTML have auto height so if we have a div in the body section and add div height 100% this will not working because div's parent's element have not height (), it will not and object (if div has not content).

Now I changed HTML, body height 100% now div show with 100% height if I just change one of them (body or HTML) height 100% div height 100% also not working.
 

html, body{
    height: 50%;
}

If you changed height of both to  half 50% (Probably you need it) then div height will be 25% because HTML height 50% and body height will 50% of HTML height and result with the show as 25% height.

Another way is to make div height 100vh. vh is view port height you can read here about this

div{
    height: 100vh;
}