屏幕元素被地图挡住了？答案

【问题标题】：Screen elements blocked out by map?屏幕元素被地图挡住了？
【发布时间】：2012-04-05 05:50:40
【问题描述】：

我正在使用 phonegap 制作移动应用程序。也就是说，都是用 HTML、CSS 和 JavaScript 完成的。

这是一页的正文：

<p><a style="text-decoration:none" href="index.html">Home</a></p>

    <div id="map_canvas" style="width:100%; height:100%"></div>

<div id="bottombar">
        <p>Hello</p>
</div>

map_canvas div 是谷歌地图。问题是它会自动拉伸到屏幕底部并挡住我放在它下面的任何东西，例如显示“你好！”的 div

我对 html 和 css 有点陌生。我做错了什么？

【问题讨论】：

您能否在 jsfiddle.net 上发布更多代码/做一个示例，以便我们了解该元素如何与您应用中的其他元素进行交互？（CSS也是！）

标签： html css mobile-application

【解决方案1】：

您将地图的高度设置为 100%，因此它占据了 100% 的屏幕并将其他内容向下推。

尝试将“身高：100%”的部分更改为更小的数字。

我刚刚尝试了以下 CSS，它成功了：

<style type="text/css">
  html, body, #map_canvas {
    margin: 0;
    padding: 0;
    height: 90%;
  }
</style>

【讨论】：

我试过了，没什么区别。有一瞬间，我以为我犯了有史以来最愚蠢的错误，但没有运气。
固定高度怎么样，比如“300px”而不是百分比？
我刚刚编辑了我的答案以包含一些我刚刚测试过的 CSS，它可以工作。
工作就像一个魅力。谢谢。回想起来似乎很明显。