设置OpenLayers地图容器的尺寸

Question

我具有Bootstrap导航栏和OpenLayers映射的基本HTML布局。

JS小提琴在这里。

HTML看起来像这样：

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Title</a>
    </div>
  </div>
</nav>

<div id="map" class="map"></div>

问题是导航栏，因为它会将地图div向下推，我必须向下滚动一点才能看到整个地图。我可以以某种方式将地图限制为仅适合可见的屏幕范围，这样我就没有任何滚动空间（如下图所示）吗？

这是我要完成的一个很好的例子：http : //jumpinjackie.github.io/bootstrap-viewer-template/2-column/index.html

Answer 1

您可以将其添加到您的代码中：

#map {
  height: calc(100vh - 52px); /* 100% of the viewport height - navbar height */
}