How to fit leaflet map and top menu within screen height-CodePudding

I am trying to add leaftlet map into a website i am developing. I have added a bootstrap navigation menu to the top. I want the page to fit 100% of the screen height without overflow out of the screen. Below is my code. The issue i have is that the lower part of the map goes outside of the screen. If i change the map height property to 100% the map does not show. Below is a screenshot of the view and the html code.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
    integrity="sha256-kLaT2GOSpHechhsozzB flnD zUyjE2LlfWPgU04xyI="
    crossorigin=""/>
    <!-- Make sure you put this AFTER Leaflet's CSS -->
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
    integrity="sha256-WBkoXOwTeyKclOHuWtc i2uENFpDZ9YPdf5Hf D7ewM="
    crossorigin=""></script>
    <title>Mapview</title>
  </head>
  <style>
    #map { height: 100vh; }
</style>
  <body>
    <nav >
        <div >
          <a  href="#">Navbar</a>
          <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
            <span ></span>
          </button>
          <div  id="navbarNavAltMarkup">
            <div >
              <a  aria-current="page" href="#">Home</a>

            </div>
          </div>
        </div>
      </nav>
      <div id="map"></div>
      <script src="//cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
      <script>
          var map = L.map('map').setView([51.505, -0.09], 13);

          L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
        }).addTo(map);
  
      </script>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH 8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

CodePudding user response：

I've a better responsive option here .

I particularly hate these frameworks that fill the site with several unnecessary classes and styles, I did what I could, including blocking the size of your header here :

#bodyWrapper > nav {
  flex: 0 0 56px;
  overflow: hidden;
}

See now :

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
    integrity="sha256-kLaT2GOSpHechhsozzB flnD zUyjE2LlfWPgU04xyI="
    crossorigin=""/>
    <!-- Make sure you put this AFTER Leaflet's CSS -->
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
    integrity="sha256-WBkoXOwTeyKclOHuWtc i2uENFpDZ9YPdf5Hf D7ewM="
    crossorigin=""></script>
    <title>Mapview</title>
  </head>
  <style>
    #bodyWrapper {
        max-width: 100vw;
        max-height: 100vh;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
    }
    #bodyWrapper > nav {
        flex: 0 0 56px;
        overflow: hidden;
    }
    #mapWrapper {
        flex: 1 0 auto;
        overflow: hidden;
    }
    #map { height: calc(100vh - 56px); }
</style>
  <body>
    <main id="bodyWrapper">
        <nav >
            <div >
              <a  href="#">Navbar</a>
              <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                <span ></span>
              </button>
              <div  id="navbarNavAltMarkup">
                <div >
                  <a  aria-current="page" href="#">Home</a>
    
                </div>
              </div>
            </div>
          </nav>
          <div id="mapWrapper">
            <div id="map"></div>
          </div>
    </main>
      <script src="//cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
      <script>
          var map = L.map('map').setView([51.505, -0.09], 13);

          L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
        }).addTo(map);
  
      </script>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH 8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

Hope it help you ! Run away from these frameworks XDD the flex, grid css property does a responsive website easly, sometimes better thant these frameworks ...

CodePudding user response：

Since you are not specifying the height of navbar it is causing the map to go out of maximum vertical height. Set vh property of 95vh for #map and 5vh for nav element.

See following code:

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha256-kLaT2GOSpHechhsozzB flnD zUyjE2LlfWPgU04xyI=" crossorigin="" />
  <!-- Make sure you put this AFTER Leaflet's CSS -->
  <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha256-WBkoXOwTeyKclOHuWtc i2uENFpDZ9YPdf5Hf D7ewM=" crossorigin=""></script>
  <title>Mapview</title>
</head>
<style>
  #map {
    height: 95vh;
  }
  
  nav {
    height: 5vh;
  }
</style>

<body>
  <nav >
    <div >
      <a  href="#">Navbar</a>
      <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
            <span ></span>
        </button>
      <div  id="navbarNavAltMarkup">
        <div >
          <a  aria-current="page" href="#">Home</a>

        </div>
      </div>
    </div>
  </nav>
  <div id="map"></div>
  <script src="//cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
  <script>
    var map = L.map('map').setView([51.505, -0.09], 13);

    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
      maxZoom: 19,
      attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    }).addTo(map);
  </script>
  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH 8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM B07jRM" crossorigin="anonymous"></script>
</body>

</html>

Note: Copy the code to ide or view in full page here for proper illustration.