How to put div above another div and increase height of background div

I am new to html and css. I have seen this question asked many times but I can’t seems to get it working to fit my problem.

I have 3 div tags. when the user swipe the top div tag I want the the bottom div tag to increase its height and cause the web page to scroll. then move all the div tags align at the top.

The reason I am doing this is; this will cause webpage running on a mobile to go to full screen.

  <div id="backExpander" style="height: 100%; display: inline-block; position: relative;">
  </div>
  <div id="canvasHolder" style="width: 100%; height: 100%;background-color: transparent;">
  <canvas id="GameCanvas" oncontextmenu="event.preventDefault()" tabindex="0"></canvas>
  </div>

  <div id="swipeUpHolder" style="height: 100%; width: 100%; display:block;"  >
  </div>

The script I am using is;

document.getElementById("swipeUpHolder").addEventListener('touchmove', onTouchMove, {passive: false});

function onTouchMove(e)
{
  e.preventDefault

  document.getElementById("backExpander").style.height = "120%";
 
  setTimeout((function() {
                
        document.getElementById("swipeUpHolder").style.display = "none";
        window.scrollTo(0, 0);
          }
        ), 50);
}

As you can see I am increasing the height of background div but it does not do anything.

if I increase height of top div, this will work

document.getElementById("swipeUpHolder").style.height = "120%";

But I want to hide the top div. use the bottom div to push the page to go into scroll.

Can anyone provide some advice on how to fix this?