html - 屏幕元素被地图挡住了？

Question

我正在使用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 是谷歌地图。问题是它会自动拉伸到屏幕底部并挡住我放在它下面的任何东西，例如显示“Hello！”的 div。

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

Answer 1

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

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

我刚刚尝试使用以下 CSS 并且它有效：

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