Why i can't make absolute div height 100%

Question

I have problem, I have one fixed container, inside them I have absolute div, I want to set .absolute div height:100%; to be full height of container div(500px). Here is what I tried to solve my problem, this need because I want to create mobile menu with toggle container, and its important for me to be 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;
}

Answer 1

The parent div .fixed is absolutely positioned and has a height 50px. So applying height: 100%on it's child will inherit the relative height(i.e 50px).

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

Note: vh is 1/100th of the height of the viewport(visible webpage height).

Updated Fiddle

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

Answer 2

you are using Fixed div as an Parent div of Absolute div, Absolute div can have 100% of Fixed div it can't extend to its parent's height if you add height value in Percentage.If you want it to extend as parent height you must have to add height in px (pixels)

.container{
  width:100%;
  height:500px;
  background-color:#ddd;
}
.fixed{
  position:fixed;
  width:100%;
  height: 101px;
  background-color:red;
  top:8px;
  left:8px;
  right:15px;
}
.absolute{
  position:absolute;
  height: 117px;
  width:100%;
  background-color:green;
  top: 0px !important;
  left:0px;
  z-index: 99999999;
  top: 50px;
}