Looking for help with a CSS issue here. I've tried searching online, but haven't found a solution that works for my specific problem.
I have a parent element (Bootstrap row) with a height of 100vh - 140px. The challenge I'm facing is getting the children of this parent to occupy a percentage of its height. I want one child to take up 100% of the parent's height, and the other two to take up 40% and 60%, respectively.
I've attempted using 'height: inherit;' as well as setting max-height to the desired percentage for compatibility reasons, but it hasn't worked as expected. I've tested in Chrome, Firefox, and Safari without success.
Here is the CSS code:
// Parent
#start-page {
min-height: calc(100vh - 140px);
}
// Children
#init-square-1 {
height: inherit;
max-height: 100%;
}
#init-square-2 {
height: inherit;
max-height: 40%;
}
#init-square-3 {
height: inherit;
max-height: 60%;
}
HTML:
<section id="start-page" class="row">
<div id="init-square-1" class="col-xs-12 col-sm-6"></div>
<div id="init-square-2" class="col-xs-12 col-sm-6"></div>
<div id="init-square-3" class="col-xs-12 col-sm-6"></div>
</section>