Screen elements blocked out by map?

Question

I'm making a mobile app using phonegap. That is to say, it's all done in HTML, CSS, and JavaScript.

Here is the body of one page:

<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>

The map_canvas div is a google map. The problem is that it automatically stretches to the bottom of the screen and blocks out anything I put beneath it, such as the div that says "Hello!"

I'm kind of new to html and css. What am I doing wrong?

Answer 1

You have the height of the map set at 100%, so it is taking up 100% of the screen and pushing the other content down.

Try changing the part that says "height:100%" so a smaller number.

I just tried with the following CSS and it worked:

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