(jQuery mobile) how to let main div wrap the rest between header and footer?

Question

This is html code I wrote using jQuery mobile

<div data-role="page" id="map-page">
<div data-role="header" data-theme="a" data-position="fixed"
    data-fullscreen="true" data-tap-toggle="false">
    <h1>header</h1>
</div>

<div data-role="main" class="ui-content" id="map_canvas">
    <div id="map"></div>
</div>

<div data-role="footer" data-theme="a" data-position="fixed"
    data-fullscreen="true" data-tap-toggle="false">
    <h1>footer</h1>
</div>

id=map is google map. and.. this is CSS

<style>
    #map-page{
        width: 100%;
        height: 100%;
        padding: 0;
    }
    #map-canvas{
        position: relative;
        overflow: hidden;
        min-height:100%;
        height:auto !important;
    }
    #map{
        position: absolute;
        top: 0px;
        left: 0px;
        height: 100%;
        width: 100%;
    }
</style>

In this situation google map covers all area under the header and footer. I can see top and bottom of map through header&footer cloudy. What I want is that map just wrap the rest between header and footer. How can I do that?

Thank you.

score 0 · Answer 1 · answered Jul 28 '17 at 13:11

You dont need to specify fixed for the header and footer.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page">
  <div data-role="header">
    <h1>Welcome To My Homepage</h1>
  </div>

  <div data-role="main" class="ui-content">
   <div id="map" style="width:400px;height:400px;"></div>
  </div>

  <div data-role="footer">
    <h1>Footer Text</h1>
  </div>
</div> 

</body>
<script>
function myMap() {
var mapOptions = {
    center: new google.maps.LatLng(51.5, -0.12),
    zoom: 10,
    mapTypeId: google.maps.MapTypeId.HYBRID
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
}
</script>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=myMap"></script>
</html>

What I want is that 3 elements(header, footer, main) fill all screen without any empty space. But thank you for your kind answer. Goodbye. p.s) I'm afraid that you revealed your api-key on code... — GM Park, Jul 28 '17 at 16:35

GM Park · Accepted Answer · 2017-07-28T16:38:46.957

I have finished my work using percentage. Here is my code.

#map-page{
        width: 100%;
        height: 100%;
        padding: 0;
    }
    #header, #footer{
        height: 6%;
        text-align: center;
        margin: 0;
    }
    #main{
        position: absolute;
        top: 6%;
        height: 88%;
        width: 100%;
    }
    #map{
        position: absolute;
        height: 100%;
        width: 100%;
    }

It gives me conclusion I want. Maybe good developers better than me show more elegant solution.

(jQuery mobile) how to let main div wrap the rest between header and footer?

2 Answers2