Css Bootstrap col&x27内的传单；不要占据整个高度

我正在使用Angular和传单，以及ngx传单包，我无法让我的地图占据页面的全部高度和宽度。当我定义一个固定的高度和宽度时，它工作得很好，但当我将它们更改为100vh时，它不会出现在垂直滚动条上

包含映射的div：

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

应用于地图的样式：

.map {
  height: 100vh;
}

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

---

尝试设置

高度：100vh

而不是

高度：100%

以用于类

.map

@GrzegorzT。它现在出现了，但我留下了一个垂直滚动条。你能在你的问题中添加一个打印屏幕吗，完整站点？添加这个

body，html{width:100%；height:100%；}body{margin:0；}

已经添加了一个sreenshot。上一个建议没有改变任何东西…没有任何改变，因为我没有看到全部内容：）

高度：calc（100vh-px中蓝色标题的高度）

尝试设置

高度：100vh

而不是

高度：100%

类

.map

@GrzegorzT。它现在出现了，但我留下了一个垂直滚动条。你能在你的问题中添加一个打印屏幕吗，完整站点？添加这个

body，html{width:100%；height:100%；}body{margin:0；}

已经添加了一个sreenshot。最后一个建议没有改变任何东西……没有任何改变，因为我没有看到整个过程：）

height:calc（100vh-px中蓝色标题的高度）

.map {
  height: 100vh;
}