温泉UI：谷歌地图在里面有0高度<ons-page>(仅限Android 2.3 / Webkit)

Question

使用温泉UI时，如果我将Google地图放在页面上，我无法使地图具有页面/浏览器的完整高度，尝试了所有方法，但其高度仍然是0（地图根本不显示）。但是，如果我将其移动到页面之外，它可以很好地处理整个宽度和高度。由于我的模板结构，我无法将地图移动到页面之外

此问题仅在Android 2.2或2.3中发生。如果你想在桌面上看到它，你可以使用Midori浏览器。地图在Firefox和Chrome或Android 4.x的Webkit中显示正常。

这是代码笔：codepen.io/tranduyhung/pen/RNNBEQ

我尝试了许多解决方案，但仍然无法使其工作。如果你有任何建议，我真的很感激！

P/S：以防万一您需要Midori浏览器，请 http://midori-browser.org/download/choose/在此处下载。我使用 0.4.3

Answer 1

问题似乎是页面内容div 中的div，由 ons-page 指令生成，其计算高度为 0px。您可以尝试向ons-page添加修饰符，以为此div设置自定义样式，如下所示：

.HTML：

<ons-page modifier="map">
  <ons-toolbar>
    <div class="center">My App</div>
  </ons-toolbar>
  <div id="map-canvas"></div>
</ons-page>

.CSS

.page--map .page--map__content>div{
  height:100%;
}

检查这支修改过的笔：http://codepen.io/anon/pen/emNpzX