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

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

尝试更改“高度：100％”的部分，以便更小的数字。

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

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

屏幕元素被地图阻挡了？

1 个答案: