当视口/引导程序导航栏发生变化时，如何调整 Leaflet map 的大小？

Question

我正在使用 Leaflet 和引导导航栏，我希望能够在视口大小更改时调整 Leaflet map div 的大小。

我的 html 是：（我省略了侧边栏和模态 html，因为我认为它不相关）

<!DOCTYPE html>
<html lang="en">
<head>

  <title>MyApp</title>

  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!--Bootstrap CSS-->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  
  <!--This link is required by L.easyButton-->
  <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
  
  <!--Leaftlet CSS-->
  <link rel="stylesheet" href="./css/leaflet.css">
  <link rel="stylesheet" href="./css/easy-button.css">
  <link rel="stylesheet" href="./css/L.Control.Sidebar.css">
  <link rel="stylesheet" href="./css/MarkerCluster.css">
  <link rel="stylesheet" href="./css/MarkerCluster.Default.css">

  <!--Font Awesome CSS-->
  <link rel="stylesheet" href="../fontAwesome/css/all.min.css">

  <!--Document CSS-->
  <link rel="stylesheet" href="css/styles.css">
  
</head>
<body>
  
  <!-- Main navbar -->
    <nav class="navbar-inverse">
      <div class="container-fluid">
        <div class="row">
        <div class="col-lg-4 text-center">
          <ul id="currentLocation" class="list-inline navbar-text navbar-left">
            <li></li>
            <li><p class="text-success"></p></li>
            <li><button id="resetLocation" type="button" class="btn btn-primary active">Locate</button></li>
          </ul>
        </div>
        <div class="col-lg-4 text-center text-primary text-uppercase">
          <h2 id="appNameTitle">My App</h2>
        </div>
        <div class="col-lg-4 text-center">
          <ul class="list-inline navbar-text navbar-right">
            <li></li>
            <li><select></select></li>
          </ul>
        </div>
      </div>
    </div>
  </nav>

  <!-- Leaflet Map div -->
  <div id="map"></div>

<div id="preloader"></div>

<script src="./js/jquery3.6.0.js"></script>

<!--Preloader-->
<script type="application/javascript" src="./js/preloader.js"></script>
<!--Preloader-->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script type="application/javascript" src="./js/leaflet.js"></script>
<script type="application/javascript" src="../fontAwesome/js/all.min.js"></script>
<script type="application/javascript" src="./js/easy-button.js"></script>
<script type="application/javascript" src="./js/L.Control.Sidebar.js"></script>
<script type="application/javascript" src="./js/leaflet.markercluster.js"></script>
<script type="application/javascript" src="./js/money.js"></script>
<script type="application/javascript" src="./js/script.js"></script>

<!--
  <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin="" defer></script>
-->

</body>
</html>

我现在将 map div 高度设置为 89vh，因为我仍然可以全宽查看 map 和导航栏，但这只是暂时的，因为它不能保持我想要的“适合屏幕”行为。

CSS：

#map {
    width: 100%;
    height: 89vh;
}

当浏览器窗口的宽度减小时，导航栏将开始堆叠，并且 map div 将向下溢出并具有 map 剪辑的下部。

我想让地图的 div 元素自动调整其大小，以便在导航栏调整大小/浏览器视口更改后它始终占用剩余的可用空间。 当我调整浏览器 window 的大小时，似乎没有考虑导航栏，我猜它占用了另外 11% 的 vh。

我尝试将 map div 放入另一个容器流体并将其大小设置为 auto 和 100%，但无论我尝试什么，它似乎都需要 map div 的固定高度（px 或 vh），这不是我想要的。

Answer 1

您可以定义html height body

html, body {
  height: 100%;
}

并添加position: fixed ：

#map {
  width: 100%;
  height: 100%;
  position: fixed;
}

现场示例：

 html, body { height: 100%; } #map { width: 100%; height: 100%; position: fixed; }

 <:--Bootstrap CSS--> <link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <:--This link is required by L.easyButton--> <link href="http.//netdna.bootstrapcdn.com/font-awesome/4.0:3/css/font-awesome.css" rel="stylesheet"> <.-- Main navbar --> <nav class="navbar-inverse"> <div class="container-fluid"> <div class="row"> <div class="col-lg-4 text-center"> <ul id="currentLocation" class="list-inline navbar-text navbar-left"> <li></li> <li> <p class="text-success"> </p> </li> <li><button id="resetLocation" type="button" class="btn btn-primary active">Locate</button></li> </ul> </div> <div class="col-lg-4 text-center text-primary text-uppercase"> <h2 id="appNameTitle">My App</h2> </div> <div class="col-lg-4 text-center"> <ul class="list-inline navbar-text navbar-right"> <li></li> <li> <select></select> </li> </ul> </div> </div> </div> </nav> <.-- Leaflet Map div --> <div id="map"></div> <div id="preloader"></div> <script src="https.//cdnjs.cloudflare.com/ajax/libs/jquery/3:3.1/jquery.min.js"></script> <script src="https.//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>