My knowledge of HTML and bootstraps is somewhat limited. I am encountering an issue where a div, specifically a Leaflet map, is not completely filling the wrapper div. The structure of my webpage consists of a sidebar that can be toggled on and off, along with the map itself.
Below is the basic HTML layout:
<div class="wrapper">
<!-- Sidebar -->
<nav id="sidebar">
<div class="sidebar-header">
<h3>Genre</h3>
<input type="radio" name='genre' id="allGenre" checked> All<br>
</div>
</nav>
<!-- Page Content -->
<div id="content">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<button type="button" id="sidebarCollapse" class="btn btn-info">
<i class="fas fa-align-left"></i>
<span>Filter Events</span>
</button>
</div>
</nav>
<!-- Map! -->
<div id="map" style="min-width: 100vh; min-height: 100vh" pointer-events="all"></div>
</div>
</div>
Here's a snippet of the corresponding CSS:
.wrapper {
display: flex;
width: 100%;
align-items: stretch;
}
#map{
}
#content{
}
#sidebar {
/* Add all previous styles here */
background: #7386D5;
color: #fff;
transition: all 0.3s;
min-width: 250px;
max-width: 250px;
min-height: 100vh;
}
#sidebar.active {
margin-left: -250px;
}
The main issue I'm facing is that the map doesn't entirely fill the wrapper div. Even though I have set the content div (containing the map div) to 100vh, it still does not fully occupy the entire wrapper. This leads to gaps or whitespace as shown in the screenshots below:
https://i.sstatic.net/nfXOm.jpghttps://i.sstatic.net/sgQ8n.jpg
While the map fills up the content div, the content div fails to fill the outer wrapper div completely, creating empty space. How can I resolve this issue and ensure that the content fills the wrapper while retaining the appearance of the existing sidebars?