I'm currently working on a project that involves integrating Bootstrap and leaflet for a web mapping application. I've encountered an issue where the map is not displaying properly across all browsers. Specifically, while the map successfully covers the entire height of the main container in Firefox, it fails to do so in Chrome or Safari.
To provide some context, I've structured my HTML with a <body> element set to min-height: 100vh. Within the body, there's a <main> tag styled with flex: 1 0 auto, ensuring it fills the space between the header (<nav>) and footer elements.
Within the <main> tag, I have a
<div class="container-fluid h-100"><main> itself. Inside this container, there's a <div id="map" class="h-100">This setup functions correctly in Firefox but not in Chrome or Safari. You can see the difference here - Firefox displays the map within a container with correct height, whereas Chrome and Safari render the container with zero height and no visible map.
I've ruled out the common issue of % based heights caused by parent elements lacking height. Even in Chrome, the <main> element has been assigned a definite height as evidenced here: <main> with height.
I suspect this discrepancy could be related to the flex property applied to the <main> tag, leading to different height evaluations in various browsers.
For reference, below is the complete HTML structure:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body class="bg-dark">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="/"></a>
<button class="navbar-toggler navbar-dark border-0" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Toggle navigation menu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="nav-content">
<ul class="navbar-nav align-items-center">
<li class="nav-item ">
</li>
<li class="nav-item ">
</li>
<li class="nav-item">
</li>
<li class="nav-item">
</li>
<li class="nav-item ">
</li>
</ul>
</div>
</nav>
<main>
<div class="container-fluid h-100">
<div id="map" class="h-100"></div>
</div>
</main>
<footer>
</footer>
</body>
</html>
Additionally, relevant CSS styles are included below:
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1 0 auto;
}
If anyone has insights or suggestions to resolve this issue, I'd greatly appreciate your assistance.