Set div height in % inside a div with height and width 100% - css

Question

I have the current html structure
<release_cover>
<overlay_controllers> Green Div </overlay_controllers>
<img src="blu.div" />
</release_cover>
And I want to achieve this:
The img tag is the blue container.
The magenta is the release_cover tag.
I have problem in setting the overlay_controller tag (the green) at a 20% height, exactly positioned at 80% of the container.
So far i did:
release_cover{
width: 100%;
height: 100%;
position: relative;
}
release_cover img{
width: 100%;
height: 100%;
}
overlay_controllers{
min-height: 20%;
margin-top: 80%;
position: absolute;
width: 100%;
}
Unfortunately the height of the green div depends on what's inside and not a fixed 20%.
Suggestions?
(example with the suggestions received so far: https://jsfiddle.net/82Lb0nhe/ )

Answer 1

Using a combination of absolute position along with top, while also not allowing a height greater than 300px it will compute correctly:
.container {
width: 300px;
height: 300px;
}
overlay_controllers {
z-index: 2;
bottom: 0%;
position: absolute;
margin-top:;
height: 20%;
width: 100%;
background-color: #fc0;
}
release_cover {
top: 0px;
width: 100%;
position: relative;
display: block;
overflow: hidden;
margin: 0px;
padding: 0px;
max-height: 300px;
}
release_cover img {
padding: 0;
margin: 0px;
z-index: 1;
width: 100%;
height: 100%;
}
Working fiddle: https://jsfiddle.net/fL98w9of/

Answer 2

You could position overlay_controllers using top instead of margin-top property:
release_cover {
width: 100%;
height: 100%;
position: relative;
display: block;
}
release_cover img {
width: 100%;
height: 100%;
}
overlay_controllers {
position: absolute;
top: 80%;
height: 20%;
width: 100%;
overflow: hidden;
}