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

Question

如果我将宽度设置为500px，我可以在单击“开始”按钮时显示map-canvas div。如果我将高度/宽度设置为100％，则不会显示。

我想确保我的项目会在移动设备上加载，因此我不想使用绝对尺寸。

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

Answer 1

使用可以使用没有width | height值的绝对定位，使用top|left|bottom|right并将0设置为其值，这将导致#map-canvas div成为包含元素#second的大小，只要它设置为相对如此：

#second {
    position: relative;
}

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

这是updated bin。

我希望这有帮助！

Answer 2

请参阅Mike Williams explaination of percentage sizing from his Google Maps Javascript API v2 tutorial

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

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