html - 屏幕元素被 map 挡住了？

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 是一个谷歌地图。问题是它会自动延伸到屏幕底部并挡住我放在它下面的任何东西，例如说“你好!”的 div

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

Answer 1

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

尝试将“height:100%”部分改为较小的数字。

我刚刚尝试使用以下 CSS，它成功了:

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