javascript - 谷歌地图 div 没有出现在 JSBin 中

Question

如果我将宽度设置为 500 像素，我可以在单击“开始”按钮时显示地图画布 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%;
}