HTML Fullscreen API，如何使其对动态生成的div响应（高度钳制）

Question

我正在主div内创建多个固定高度的动态div。 我无法将固定高度更改为％height，因为即使它为空，它也必须具有固定高度，因为用户随后将元素拖到这些div上。 现在，我正在使用全屏API将主div放大到全屏。 而且我希望随着屏幕的扩大，内部div的高度会增加。

在小屏幕上看起来像这样

在全屏上看起来像这样

在全屏模式下，内部div会相应地调整其宽度，因为它们的宽度为％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 A，B，C和D不会相应地调整其高度。

Answer 1

写这样的媒体查询->

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

fullScreenWidth是屏幕尺寸，以像素为单位