无法将MapBox地图设置为内部div

Question

我需要将MapBox地图（mapbox-gl-js）放置在网页的内部div中。 为简单起见，下一个代码在表中有两列。我将下一种样式用于地图：

<style>
        body {
            margin: 0;
            padding: 0;
        }
        #mapcontainer {
            position: relative;
            top:0;
            bottom:0; 
            left:0;
            right:0; 
        }
        #map {
            position: absolute; 
            top:0;
            bottom:0;           
            width:100%;
            height:1000px;
        }
</style>

并且：

  <table cellspacing="0" cellpadding="0" id="maket">
   <tr> 
    <td id="leftcol" >
        Левая колонка <br>
    </td>
    <td  id="rightcol">
           <div id='mapcontainer'> 
                <div id='map'></div>    
           </div> 
    </td>
   </tr>
  </table>

和脚本：

<script>
    mapboxgl.accessToken = 'pk.eyJ1IjoidGVyZW50ZXYiLCJhIjoiY2sycDN1Z21zMDBheTNrbzZ2aG42aWUyMiJ9._2hucdk7L6jhzEHE6LGv9A';
    map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/terentev/ck2so0c4h1q5x1cqow0aj9nh8',
        center: [34.047, 63.779],
        zoom: 4.41
    });     
</script>

右侧有垂直滚动条。如何摆脱它们？ 应该做什么风格以及在哪里可以读到？ 如果您删除该行

height:1000px;

图像消失

P.S。到目前为止，我已经找到了这样一种方法：

<style>
    body {
        margin: 0;
        padding: 0;
    }

    #mapContainer {
        position: relative;
    }

    #map {
        position: absolute;
        left: -30px;
        top: -20px;
        width: 85vw;
        height: 100vh;
    }
</style>

<div id='mapContainer'>
    <div id='map'>
    </div>
</div>

我在Blazor（ASP.NET Core）中尝试了相同的方法，但是在所有情况下都是相似的情况。