javascript - HTML Fullscreen API，如何使其响应(高度虎钳)动态生成的 div

Question

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

在小屏幕上看起来像这样

全屏显示是这样的

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

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

<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 是以像素为单位的屏幕大小