У меня есть приложение с картой Leaflet.js и боковой панелью. На рабочем столе это выглядит хорошо, но когда я запускаю инспектор страниц и выбираю мобильную версию, в нижней части страницы (за пределами карты / боковой панели) появляются пробелы, а также нечетное серое поле. Я не могу проверить ни пробел, ни серый прямоугольник, когда наведу на них указатель мыши. Я попытался изменить CSS тела безрезультатно (включая отсутствие нижнего поля / отступов для тела).
Я немного озадачен здесь. Вот основная структура HTML:
<body>
<!-- links to scripts go here -->
<!-- Content Starts here -->
<div class="wrapper">
<!-- Sidebar -->
<nav id="sidebar">
<div class="sidebar-header">
<div class="filterContainer">
<!-- filter map data with radio buttons here -->
</div>
<div class="filterContainer">
<!-- filter map data with radio buttons here -->
</div>
</div>
<!-- filter map data with calendar -->
<div id="datepicker"></div>
</nav>
<!-- Page Content -->
<div id="content">
<!-- map -->
<div id="map" style="min-width: 100vh; min-height: 100vh">
<button type="button" id="sidebarCollapse" class="btn btn-info">
<span>Filter Events</span>
</button>
</div>
</div>
</div>
<script>
</script>
И некоторые соответствующие CSS:
body {
font-family: 'Poppins', sans-serif;
background: #fafafa;
height:100%;
max-height:100%;
overflow: hidden;
padding-bottom: 1px;
}
.wrapper {
display: flex;
width: 100%;
align-items: stretch;
}
#sidebar {
min-width: 250px;
max-width: 250px;
}
.filterContainer ul{
list-style: none;
margin: 0;
margin-top: -12%;
margin-left: -12%;
}
#content{
width:100%;
height:100%;
}
#map{
height:100%;
}
И, наконец, изображение проблемы:
Любая помощь приветствуется.