Leaflet.js没有显示带有可折叠侧边菜单的全屏地图（简单边栏）

Question

我遇到一些问题，让leaflet.js #map与simple-sidebar（来自startbootstrap）一起全屏显示。什么想法可能是错的？

这是我设置的测试环境：

http://codepen.io/anon/pen/MwbJzB

body {
    padding: 0;
    margin: 0;
}
html, body, #map {
    height: 100 % ;
    // height: 500px;  // uncomment this and it will at least display a map.
    width: 100 % ;
}

Answer 1

在这种情况下，这个问题是地图所在的容器div。它们正在折叠它们的高度，所以地图上的100％只是折叠高度的100％。

我稍微更新了codepen以显示我的意思：

#wrapper,
#page-content-wrapper,
.map-container,
.map-container .row,
.map-container .col {
  height: 100%;
}

http://codepen.io/anon/pen/eNyapd