Question

我正在尝试在我的传单地图上放置一个引导导航栏。当我点击缩放控制按钮时，我的导航栏消失了，我不明白为什么。

这是传单吗？

  <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>

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

请注意，首次加载页面时，所有内容都可以。但是单击缩放控制按钮会使导航栏消失。

Answer 1

您的导航栏不会消失，页面会滚动到地图的顶部。你可以向上滚动。这是你的导航栏:)你想要做的是给你的身体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

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

1 个答案: