HTML Fullscreen API , how to make it responsive (height vise) for dynamically generated divs

Question

I am creating multiple dynamic divs of fixed height inside a main div. I can't change the fixed height to % height because it has to have a fixed height even if its empty because user drags elements onto these divs afterwards. Now i am using the Full Screen API to enlarge the main div to full screen. and i want the inside divs to grow their height as the screen enlarges.

On Small Screen it looks like this

On Full Screen it looks like this

on full screen the inside divs adjusted their widths accordingly because they have taken widths % vise but the height of divs doesn't increase because its fixed pixels. The red area in the second image shows the empty space when in full screen mode. how could this area be taken by the divs

The actual code of this is too much complex and lengthy so i am writing here a sample code to understand the problem

<div id="main"> 
  <div Class="Row">
     <div Class="Col-md-6">
        <div id="A" style="height:100px;width:50%">
        </div> 
     </div>
     <div Class="Col-md-6">
        <div id="B" style="height:100px;width:50%">
        </div>
    </div>
 </div>
 <div Class="Row">
     <div Class="Col-md-6">
        <div id="C" style="height:100px;width:50%">
        </div> 
     </div>
     <div Class="Col-md-6">
        <div id="D" style="height:100px;width:50%">
        </div>
    </div>
 </div> 

Like i said that divs A,B,C and D are created dynamically. Now i apply a full screen function on main div

 var element = document.getElementById("main");
 element.webkitRequestFullscreen();

The main div gets to Full screen but the divs A,B,C and D do not adjust their height accordingly.

Answer 1

write a media query like this->

@media screen and(min-width:fullscreenswidth) {
    .yourdiv {
              height:100vh;
       }
}

The fullScreenWidth is the size of the screen in pixels