javascript - GoogleマップのdivがJSBinに表示されない

Question

幅を 500px に設定すると、「開始」ボタンをクリックしたときに map-canvas div が表示されるようになります。高さ/幅を 100% に設定すると、表示されません。

プロジェクトがモバイル デバイスにロードされることを確認したいので、絶対寸法を使用したくありません。

http://jsbin.com/OpujukIF/1/edit?html,css,output

Answer 1

width | height値なしで絶対配置を使用できます。値としてtop|left|bottom|rightwith 0set を使用すると、次のように相対に設定されている限り#map-canvas div、含まれている要素のサイズになります。#second

#second {
    position: relative;
}

#map-canvas { 
    position: absolute;
    top: 0; bottom: 0;
    left: 0; right: 0;
}

これが更新された binです。

これが役立つことを願っています！

Answer 2

Mike Williams による、Google Maps Javascript API v2 チュートリアルのパーセンテージ サイジングの説明を参照してください。

html {
  height:100%;
  width: 100%; 
}
body {
  padding-top: 50px;
  padding-bottom: 20px;
  height: 100%;
  width: 100%;
}

#map-canvas { 
  height: 85%;
  width: 100%;
}