I am looking to dynamically adjust the height of child divs within a fixed-height parent div. The parent div's height is fixed, but the number of child divs can vary. I want each child div to have a height equal to the parent div's height divided by the total number of child divs present. Although there are currently two child divs in my example, the number may change.
Below is the HTML structure:
<div class="calendar-default">
<div class="calendar-plage" style="background-color: red;"> </div>
<div class="calendar-plage" style="background-color: green;"> </div>
</div>
Here is the corresponding CSS:
.calendar-default{
background-color: black;
position: relative;
height: 100px;
width: 100px;
}
.calendar-plage{
height: auto; /* ??? */
}
You can see a working example in this Fiddle: https://jsfiddle.net/z2anpsy7/
While I have achieved this using Javascript, I am curious if there is a way to accomplish it using CSS only. Is this possible?
Additionally, since this is within an AngularJS app, if you have an elegant AngularJS solution to this problem, I would greatly appreciate it!