让 Google 地图 canvas 使用 100% 剩余高度的最聪明的方法是什么

Question

请看上面的截图。在这个网页上，我有一个由 3 个级别（绿色、浅棕色、深棕色）组成的 header，然后是一个 Google 地图。地图在某个位置（在本例中为美国国家/地区）放大。

我遇到的问题是地图居中（垂直）偏离了与 header 相同的像素数量。 canvas 设置为 100% 高度，html 和 body 元素也是如此。由于我不想在视口中使用滚动条，因此在 body 元素上将溢出设置为隐藏。

通过暂时禁用溢出规则，您可以看到地图溢出了视口，这是有道理的，因为它从 header 下方开始并使用了整个视口的 100%。因此它确实是 header.

的 100% + 高度

然而，我想要的是地图的高度等于总视口高度的 100% 减去 header 的高度。由于 headers 的高度是动态的并且取决于几个因素，我的问题是最聪明的方法是什么？

我想 Javascript 可以解决这个问题，但我希望我们现在有更好的方法？我正在寻找一个可靠的解决方案。

编辑：实例： http://www.jungledragon.com/wildlifemap/US

Answer 1

最好的方法是使用相互冲突的绝对位置。地图 div 将 css 类似于：

#mapcanvas {
  height: auto;
  position: absolute;
  top: 188px; /* this is to account for your header */
  bottom: 0;
}

在我的Developing for Mobile Devices Post

中查看动态地图高度header