代码之家 › 专栏 › 技术社区 › Marin Leontenko

设置OpenLayers地图容器的尺寸

openlayers twitter-bootstrap css html

Marin Leontenko · 技术社区 · 7 年前

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

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,我必须向下滚动一点才能看到整个地图。我是否可以将地图限制为只适合可见屏幕范围,这样就不会获得任何滚动空间(如下图所示)?

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

1 回复 | 直到 6 年前

VXp Kadir BuÅ¡atliÄ 7 年前

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

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

推荐文章

Softly · 单选按钮未按预期取值

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Thirumal isireddy · 在导航栏顺风css中,img被扭曲,而不是将元素推到旁边

1 年前

eXor420 · 如何在脚本标记中使用导出的函数?

1 年前

Hadi · 如何在无效和有效输入中选择用于更改样式的psoudo元素(after)

1 年前

IonicMan · 剑道网格在宽度过大时不显示某些列

1 年前

Kernier · 如何将数学公式支持添加到StacksEditor?

1 年前

Md. Ibrahim · CSS网格项溢出小屏幕滚动

1 年前

Arjun V Srivatsa · 如何将系统时区信息分配给javascript中的变量?

1 年前

Akshay mek · Vscode扩展建议不适用于某些文件夹

1 年前