设置OpenLayers地图容器的尺寸 [英] Set dimensions of OpenLayers map container

问题描述

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

I have basic HTML layout with Bootstrap navbar and an OpenLayers map.

JS小提琴在这里.

HTML看起来像这样:

HTML looks like this:

<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向下推，我必须向下滚动一点才能看到整个地图.我可以以某种方式将地图限制为仅适合可见屏幕范围，这样我就没有任何滚动空间(如下图所示)吗?

The problem is navbar because it pushes the map div down and i have to scroll down a bit to see the whole map. Can I somehow restrict the map to fit only the visible screen extents so i don't get any scrolling space (like in the picture below)?

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

Here is a good example of what i'm trying to acomplish: http://jumpinjackie.github.io/bootstrap-viewer-template/2-column/index.html

推荐答案

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

You can add this to your code:

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

这篇关于设置OpenLayers地图容器的尺寸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！