header div 的 GoogleMap 超出 window 大小

Question

注意：我看过一些类似的问题并尝试了他们的答案（CSS position: absolute），但他们都是 ~7 岁，并没有解决我的问题。

我正在制作一个简单的 React 应用程序，其中包含交互式 Google 地图和显示地图信息的 header。但是，地图总是在页面下方扩展一点，导致页面滚动 up/down 与 header 大小相同的量。

This is a demo，执行上述操作以及相关代码片段：

HTML（通过 React 组件提供服务，如演示中所示）

<div>
  <div className="row-header">
  </div>

  <div className="mapContainer">
    <GoogleMap id="map" mapContainerStyle={mapContainerStyle} zoom={4} />
  </div>
</div>

CSS

.row-header {
  min-height: 305px;
  display: flex;
}

.col-left {
  width: 33%;
}

.col-right {
  width: 66%;
}

.mapContainer {
  max-width: 100%;
}

经过一些研究，我发现我应该尝试 CSS 绝对定位，但这并没有帮助。该新版本的 This is a demo：

HTML

<div>
  <div className="row-header">
  </div>

  <div className="mapContainer">
    <GoogleMap id="map" mapContainerStyle={mapContainerStyle} zoom={4} />
  </div>
</div>

CSS

.row-header {
  min-height: 305px;
  display: flex;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  height: 305px;
}

.mapContainer {
  position: absolute;
  top: 305px;
  left: 0px;
  right: 0px;
  bottom: 0px;
}

.Container {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
}

Answer 1

在我写这个问题的时候找到了答案。我想我也可以 post 和分享。

CSS 绝对位置修复确实有效，但是在这种特殊情况下，修复不是在 CSS 中完成，而是在 Javascript 中完成。那是因为@react-google-maps/api, uses mapContainerStyle={mapContainerStyle}, which seems to be a required field (although the docs没说清楚）。

修改mapContainerStyle后来自

const mapContainerStyle = {
  height: "100vh",
  width: "100vw"
};

至

const mapContainerStyle = {
  position: "absolute",
  top: "305px",
  left: "0px",
  right: "0px",
  bottom: "0px"
};

页面按预期显示！ See Demo

header div 的 GoogleMap 超出 window 大小

GoogleMap with header div extends beyond window size

css

reactjs

google-maps

react-google-maps