html - 设置 OpenLayers map 容器的尺寸

Question

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

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>

问题出在导航栏上，因为它会将 map div 向下推，我必须向下滚动一点才能看到整个 map 。我能否以某种方式限制 map 仅适合可见屏幕范围，这样我就不会获得任何滚动空间(如下图所示)？

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