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是屏幕尺寸，以像素為單位