I am struggling with designing a dashboard that needs to take up 100% of the height of any monitor. Despite reading multiple posts on Stackoverflow and trying different options like hv 100% and height: 100%, I still can't get it to work. I am using Bootstrap 4 for this project. Currently, I have set a fixed height to show the dashboard to my client, but I really need it to take the full height. Below is a simple HTML layout to give you an idea of the height I need for each DIV. MY LAYOUT HERE
Check out the code below:
<!-- THE ENTIRE DASHBOARD SHOULD TAKE 100% HEIGHT OF ANY SCREEN SIZE -->
<body>
<div class="container"><!-- 100% HEIGHT -->
<div class="row">
<div class="col-12 gray">Top Navigation</div>
</div>
<div class="row">
<div class="col-3 gray">
Side Table: 100%
</div>
<div class="col-9 gray">
<div class="row">
<div class="col-5 gray">Box 1: 50% height</div>
<div class="col-7 gray">Box 2: 50% height</div>
</div>
<div class="row">
<div class="col-9 pink">Box 3: 50% height</div>
<div class="col-3 pink">Box 4: 50% height</div>
</div>
</div>
</div>
</div>
</body>