

こんにちは。  
現在、cordova-googlemaps-pluginでアプリ開発の練習をしています。

とりあえず画面上に地図を表示させることはできました。  
その地図なのですが、画面いっぱいに表示させるにはどうすれば良いのでしょうか？

widthは「px」「%」「auto」どれで指定してもちゃんと表示されるのですが、  
heightは「%」「auto」では反応せず、「px」指定でしか表示されません。

[code]

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="Content-Security-Policy"/>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript">
       document.addEventListener("deviceready", function() {
      var div = document.getElementById("map_canvas");
      var map = plugin.google.maps.Map.getMap(div);
    }, false);
    
        </script>
      </head>
      <body>
      <div style="width:auto; height:500px;" id="map_canvas"></div>
      </box>
      </body>
    </html>
    
[/code]

どうぞ宜しくお願いいたします。

何が問題なのでしょう？それとも「px」でしか表示できないのでしょうか？

なにとぞご教授くださいm(__)m


CC BY-SA 4.0
2018-05-22T07:16:02.780
44150
2018-05-22T07:36:50.373
2018-05-22T07:25:10.267
3060
13364
question
html cordova
cordova-googlemaps-pluginで地図を画面いっぱいに表示させるには？


基本的に高さにパーセントを用いる際は親要素の高さが決まってないといけません。  
`html`にパーセントを用いると表示領域に対する割合の高さを指定できるため、  
`html`と`body`に高さ`100%`を指定してはどうでしょうか？

[code]

    html, body {
        height:100%;
    }
    
[/code]

[code]

    .wrapper {
        width:240px;
        height:240px;
    }
    .target {
        background-color:#a0a0F0;
        width:100%;
        height:100%;
    }
[/code]

[code]

    <div class="wrapper">
        <div class="target">
            親に指定有り
        </div>
    </div>
    <hr/>
    <div>
        <div class="target">
            親に指定無し
        </div>
    </div>
[/code]


CC BY-SA 4.0
2018-05-22T07:36:50.373
44153
2018-05-22T07:36:50.373
44150
answer