Bootstrap 4.1页面适配：让Google地图填满页眉页脚间空间

我来帮你搞定这个布局难题！你现在遇到的滚动条和页脚溢出问题，核心是没有让中间的地图区域自动填充页眉和页脚之外的剩余视口空间。Bootstrap 4本身基于Flexbox，我们可以利用这个特性实现完美适配：

解决方案步骤 #

1. 调整页面整体Flex布局 #

首先把页面根容器（比如<body>）设置为垂直方向的Flex容器，让它的高度刚好覆盖整个视口：

html, body {
  height: 100vh; /* 用视口高度确保铺满屏幕 */
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column; /* 垂直排列子元素 */
}

2. 固定页眉和页脚的空间 #

页眉和页脚只需要占据自身内容的高度，不需要额外拉伸：

<header class="bg-light py-3">
  <!-- 你的页眉内容 -->
</header>

<footer class="bg-dark text-white py-3">
  <!-- 你的页脚内容 -->
</footer>

这里用Bootstrap的内边距类py-3控制高度，你也可以自定义固定高度（比如height: 60px;）。

3. 让地图区域填充剩余空间 #

给包含地图的容器添加flex-grow: 1属性，它会自动占据页眉和页脚之外的所有剩余空间：

<main class="flex-grow-1 overflow-hidden">
  <div id="map-canvas"></div>
</main>

对应的地图样式：

#map-canvas {
  width: 100%;
  height: 100%; /* 铺满父容器的高度 */
}

overflow-hidden是为了防止地图内容溢出时出现局部滚动条，确保整个页面没有多余滚动条。

完整代码示例 #

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <style>
    html, body {
      height: 100vh;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
    }
    #map-canvas {
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
  <header class="bg-light py-3">Header Content</header>
  
  <main class="flex-grow-1 overflow-hidden">
    <div id="map-canvas"></div>
  </main>
  
  <footer class="bg-dark text-white py-3">Footer Content</footer>

  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
  <script>
    function initMap() {
      new google.maps.Map(document.getElementById('map-canvas'), {
        center: {lat: -34.397, lng: 150.644},
        zoom: 8
      });
    }
    window.onload = initMap;
  </script>
</body>
</html>

为什么这样有效？ #

通过把<body>设置为垂直Flex容器，我们让页面元素按垂直方向分配空间：

• 页眉和页脚只占用自身所需的高度
• 中间的main容器通过flex-grow:1自动填充剩余的视口高度
• 地图设置为100%高度，就能完全填满main容器的空间，整个页面刚好适配视口，不会出现滚动条。

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