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

Question

Если я установил свою ширину в 500 пикселей, я могу получить div-карту 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; 
} 

Адрес 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%; 
}