Bootstrap col内的传单没有占据整个高度

Question

我正在使用Angx和Leaflet，以及ngx-leaflet软件包，但我无法使地图占据页面的整个高度和宽度。当我定义了固定的高度和宽度时，它会很好地工作，但是当我将其更改为100vh时，它会显示垂直滚动条。

包含地图的div：

<div class="col-md-10">
  <div class="map" leaflet [leafletOptions]="mapOptions"></div>
</div>

全局应用的样式：

html, body {
  height: 100%;
  width: 100%;
}

应用于地图的样式：

.map {
  height: 100vh;
}

以下是该应用的屏幕截图：