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

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>

Run Code Online (Sandbox Code Playgroud)

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

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

Answer 1

iH8*_*iH8 5

您的导航栏不会消失,页面会滚动到地图的顶部.你可以向上滚动.这是你的导航栏:)你想要做的是让你的身体100%高度减去导航栏的高度并删除边距:

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

html, #map {
    height: 100%;
}

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

Run Code Online (Sandbox Code Playgroud)

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

归档时间：	10 年，11 月前
查看次数：	495 次
最近记录：	8 年，3 月前