Leaflet地图无法铺满剩余屏幕问题求助

要实现顶部导航栏+下方铺满剩余空间的Leaflet地图，核心问题在于百分比高度的依赖链不完整，以及Bootstrap布局细节未处理到位。以下是可行的调整方案：

关键修改点 #

1. 确保根元素（html、body）占满视口高度，清除默认边距
2. 修正Bootstrap的row-col布局结构，让地图容器能正确继承父元素空间
3. 给地图容器设置100%宽高，填充父容器

修改后的完整代码 #

HTML部分 #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js" integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>

<div class="container-fluid min-vh-100 d-flex flex-column">
  <div class="row">
    <div class="col">
      Top Bar
    </div>
  </div>

  <!-- 修正：添加col并清除内边距，确保地图容器填充row空间 -->
  <div class="row flex-grow-1">
    <div class="col p-0">
      <div id="map"></div>
    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

CSS部分 #

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

/* 根元素设置100%高度，清除默认边距 */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* 地图容器设置100%宽高，填充父容器 */
#map {
  height: 100%;
  width: 100%;
}

JS部分（无需修改） #

var map = L.map('map').setView([51.455, -0.973], 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);

原理说明 #

• html, body { height: 100% }：让根元素占满整个视口高度，为后续百分比高度提供基础
• Bootstrap的flex-grow-1让下方row占据容器剩余空间，内部col p-0清除额外内边距，确保地图容器完全填充
• #map { height: 100%; width: 100% }：继承父容器尺寸，实现铺满剩余空间的效果

内容的提问来源于stack exchange，提问作者Chickensoup