css - Bootstrap col 内的传单没有占据全高

Question

我正在使用带有 ngx-leaflet 包的 Angular 和 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;
}

这是该应用程序的屏幕截图：