Google Maps div не отображается в JSBin

Question

Если я установлю ширину в 500 пикселей, я смогу получить div map-canvas, который будет отображаться, когда я нажму кнопку "начать". Если я установлю свой рост / ширину на 100%, он не будет отображаться.

Я хочу быть уверен, что мой проект загрузится на мобильное устройство, поэтому я не хочу использовать абсолютные размеры.

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

Answer 1

Использование может использовать абсолютное позиционирование без width | height значение, используя top|left|bottom|right с 0 установить в качестве их значений, что приведет к #map-canvasdiv становится размер содержащего элемента #second до тех пор, пока оно установлено относительно:

#second {
    position: relative;
}

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

Вот обновленная корзина.

Надеюсь, это поможет!

Answer 2

См. Объяснение процентного размера Майка Уильямса из его учебника по 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%;
}