I've made the picture to talk less. Hope you will understand.
The problem is that stretching 100% height DIV under other DIV with fixed height doesn't stretch properly.
Here's example to work with: jsfiddle
css:
.controlling-div {
width: 200px;
height: 200px;
}
.stretching-container-div {
width: 100%;
height: 100%;
}
.fixed-height-div {
height: 40px;
background-color: #ff8811;
border-radius: 20px;
}
.stretching-height-div {
height: 100%;
background-color: #ff2266;
border-radius: 20px;
}
html:
<div class="controlling-div"><!-- width & height can be changed -->
<div class="stretching-container-div"><!-- 100%-container -->
<div class="fixed-height-div"></div><!-- fixed height -->
<div class="stretching-height-div"></div><!-- height 100% - fixed height -->
</div>
</div>
Thanks!