css - 如何在 Bootstrap 导航标题下放置传单 map ？

Question

我将 bootstrap 与传单 map 结合使用。现在，为了给 map 提供窗口的完整高度，我使用了 $("#map").height($(window).height()); 但是我在页。这是 Bootstrap 导航栏的 html:

  <nav class="navbar navbar-light bg-faded">
        <a class="navbar-brand" href="#"><img id="logo" src="images/logo.png"></a>
  </nav> 

这是我的 map div:

<div class="col-md-9 col-sm-8 col-xs-8" id="map"></div>

现在，当我加载页面时，我会在侧面看到一个滚动条，因为 map 占据了整个窗口的高度 + 导航栏的高度。有办法解决这个问题吗？我可以在导航栏的 css 中添加一些内容，以便 map 位于它的后面吗？

更新:

在我实现了@IvanSanchez 的建议后， map 变得非常薄，像这样:

更新

当我像这样添加带有像素的 css 时，它起作用了，薄 map 变成了 600 像素的高度:

#map {
    display : table-cell;
    height : 800px;
    /*height: calc ( 100vh - 5em );*/
}

但我希望它能够响应，所以我需要它在 % 中或者像@IvanSanchez 建议的那样。

Answer 1

Now to give the map full height of the window I used $("#map").height($(window).height());

不要。

如果你想让东西适应视口(viewport)大小，使用vh, vw, vmin and vmax CSS units .

如果你不能使用绝对定位的 block 元素来控制 map 容器的大小，那么使用calc像 #map { height: calc ( 100vh - 5em ); }