Листовка, нажав кнопку зуммирования, удаляет пейджинговую верхнюю часть

Я пытаюсь поместить панель навигации для ботстрапа поверх моей карты листовка. Когда я нажимаю кнопки управления масштабированием, мой навигационный бар исчезает, и я понятия не имею, почему.Листовка, нажав кнопку зуммирования, удаляет пейджинговую верхнюю часть

Является ли это ошибкой листовки?

<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="[email protected]" data-semver="0.7.3"></script> 
    <script type="text/javascript" src="script.js"></script> 
    </body>

Вот бухнуться показывает проблему: http://plnkr.co/edit/C8O6bB?p=preview

Обратите внимание, что при первой загрузке страницы все выглядит нормально. Но при нажатии на кнопки управления масштабированием навигационная панель исчезает.

источник

2015-03-02 lostintranslation

Ваш навигатор не исчезает, страница прокручивается вверху вашей карты. Вы можете прокручивать вверх. Там ваш Navbar :) То, что вы хотите сделать здесь дать вашему телу 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

источник

2015-03-02 23:18:21 iH8

совершена, спасибо! – lostintranslation

Листовка, нажав кнопку зуммирования, удаляет пейджинговую верхнюю часть

ответ

Смежные вопросы