Question

我使用的是列布局框架，而我似乎无法让Google地图使用它。如果我将地图画布上的高度定义为100px，则显示正常。但是，我希望它在6列的高度的100％，这将无法正常工作，因为它显然将高度（无论我设置的百分比）设置为0。

我的代码是：

<div class="col l6">
    <div id="map-canvas"></div>
</div>

并且javascript来自他们网站上的简单示例。

根据他们的文档，我已根据<html>和<body>将高度设置为100％，但它无论如何都无效。

我的问题是：如何确保显示地图而不必为具有特定x像素高度的#map-canvas设置样式？

Answer 1

我最近在使用Bootstrap UI时遇到过这种事情。

我必须在我的情况下添加这个，看看它是否有帮助......

#map-canvas {
    width:100%;
    height:calc(100% - 0px);
}

Answer 2

直到最近我还在与之斗争，事实上你实际上需要为地图制作一个完整的页面（文档getting started上的那个会做）。然后在您想要的实际页面上使用<iframe>。然后你就可以使用iframe的宽度和高度了。