传单，单击缩放控件删除分页顶部

Question

我想在传单地图上放置一个 bootstrap 导航栏。当我点击缩放控制按钮时，我的导航栏消失了，我不知道为什么。

这是传单错误吗？

  <body>
<header class="navbar navbar-static-top bs-docs-nav" id="top" role="banner">
  <div class="container">
    <div class="navbar-header">
      <a href="../" class="navbar-brand">Test Leaflet Navbar</a>
    </div>
    <nav class="collapse navbar-collapse bs-navbar-collapse">
    </nav>
  </div>
</header>

    <div style="height: 100%">
          <div id="map"></div>
    </div>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js" data-require="leaflet@0.7.3" data-semver="0.7.3"></script>
    <script type="text/javascript" src="script.js"></script>
  </body>

这里是一个显示问题的plunk： http://plnkr.co/edit/C8O6bB?p=preview

请注意，当您第一次加载页面时，一切看起来都正常。但是单击缩放控制按钮会使导航栏消失。

Answer 1

您的导航栏没有消失，页面滚动到地图顶部。您可以向上滚动。这是你的导航栏 :) 你想在这里做的是给你的 body 100% 高度减去你的导航栏的高度并删除边距：

body {
    margin: 0;
    height: calc(100% - 51px); /* minus navbar incl. border */
}

html, #map {
    height: 100%;
}

header.navbar {
    margin-bottom: 0; /* remove bottom margin */ 
}

这是一个更新的 Plunker：http://plnkr.co/edit/zmXyDj?p=preview

传单，单击缩放控件删除分页顶部

Leaflet, clicking zoom control removes paging-top

twitter-bootstrap

leaflet