设置 OpenLayers 地图容器的尺寸

Question

我有基本的 HTML 布局，带有 Bootstrap 导航栏和 OpenLayers 地图。

JS Fiddle here.

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 向下推，我必须向下滚动一点才能看到整个地图。我能否以某种方式限制地图仅适合可见屏幕范围，这样我就不会滚动 space（如下图所示）？

这是我正在尝试完成的一个很好的例子： 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 */
}