HTML全屏API，如何使动态生成的div响应（高度老虎钳）

Question

我在主div中创建了多个固定高度的动态div。我无法将固定高度更改为％高度，因为它必须具有固定高度，即使它是空的，因为用户之后将元素拖到这些div上。现在我使用全屏API将主要div放大到全屏。并且我希望内部div在屏幕放大时增加它们的高度。

在小屏幕上它看起来像这样

在全屏幕上，它看起来像这样

在全屏幕上，内部divs相应地调整了它们的宽度，因为它们采用宽度％vise但div的高度不会因为其固定像素而增加。在全屏模式下，第二张图像中的红色区域显示空白区域。怎么可能这个区域被divs占用

这个实际的代码太复杂和冗长所以我在这里写一个示例代码来理解问题

<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> 

就像我说的那样，div，A，B，C和D是动态创建的。现在我在主div上应用全屏功能

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

主div进入全屏但div，B，C和D不会相应调整其高度。

Answer 1

编写像这样的媒体查询 - >

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

fullScreenWidth是屏幕的大小（以像素为单位）