My goal is to convey my message visually. I hope you can understand without too many words. The issue I am facing is that when trying to stretch a 100% height DIV under another DIV with fixed height, it does not stretch properly.
If you want to experiment, here's an 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>
Thank you!