Html 被地图挡住的屏幕元素？

我正在使用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是一个google地图。问题是，它会自动延伸到屏幕底部，并屏蔽我在下面放置的任何内容，例如说“你好”的div

---

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

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

试着把上面写着“高度：100%”的部分改成更小的数字

我刚刚尝试了以下CSS，效果很好：

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

html，正文，#地图#画布{
保证金：0；
填充：0；
身高：90%；
}

我试过了，没什么不同。有一秒钟，我认为我犯了有史以来最愚蠢的错误，但没有运气。那么固定高度呢，比如说“300px”而不是百分比？我刚刚编辑了我的答案，加入了一些我刚刚测试过的CSS，它工作得很好。谢谢回想起来似乎很明显。您是否可以在jsfiddle.net上发布更多代码/制作一个示例，以便我们了解此元素如何与应用程序中的其他元素交互？（也是Css！）