html - Why i can't make absolute div height 100% -

i have problem, have 1 fixed container, inside them have absolute div, want set .absolute div height:100%; full height of container div(500px). here tried solve problem, need because want create mobile menu toggle container, , important me height 100% of mobile phone screen.

https://jsfiddle.net/d1bh9ncs/

html

<div class="container">   <div class="fixed">     <div class="absolute">      </div>   </div> </div> 

css

.container{   width:100%;   height:500px;   background-color:#ddd; } .fixed{   position:fixed;    width:100%;   height:50px;   background-color:red;   top:8px;   left:8px;   right:15px; } .absolute{   position:absolute;   height:100%;   width:100%;   background-color:green;   top:51px;   left:0px; } 

the parent div .fixed absolutely positioned , has height 50px. applying height: 100%on it's child inherit relative height(i.e 50px).

use height: 100vh; on .absolute. have used calculated height height: calc(100vh - 51px) avoid scrollbar due top: 51px.

note: vh 1/100th of height of viewport(visible webpage height).

updated fiddle

.absolute {   position: absolute;   height: calc(100vh - 51px);   width: 100%;   background-color: green;   top: 51px;   left: 0px; }