Altura de 100% para google maps

[cuasatar]

Hola a todos:

Actualmente quiero que un mapa de google maps se redimensione para que se pueda ver en dispositivos moviles. Si le doy un ancho de 100% me funciona sin problemas pero si le añado una altura de 100% no me lo muestra porque da a entender que la altura es cero.

Existe alguna manera para que el mapa pueda disminuir tanto a lo ancho como a lo alto de manera proporcional? De momento lo tengo asi:

Código CSS:

#map{
        display: block;
        height: 31.25em;
        margin: 0.5em auto;
        width: 90%;
       
    }
 

Gracias de antemano por su colaboración.

[pzin]

La altura dependerá de la altura que tengo el elemento padre. Luego 100% de alto para #map es igual a la altura de su contenedor/elemento padre.

Proporcionalmente sólo con CSS no se puede. A menos no que yo sepa. Para eso tendrías que usar JavaScript.

[cuasatar]

Proporcionalmente sólo con CSS no se puede. A menos no que yo sepa. Para eso tendrías que usar JavaScript.

Ok, queria descartar si se podia hacer solo con css, no estaba muy seguro sobre eso.
¿Podrias darme un enlace donde pueda encontrar información sobre eso? La idea que a mi se me ocurre es averiguar el ancho del div y en proporción de ese ancho cambiar el alto. No manejo mucho javascript pero digamos que a bote pronto es lo que se me ocurre. No se si mi idea es buena o existe otras alternativas.

[pzin]

Si básicamente sería tomar el ancho del elemento y hacer una regla de tres para calcular la altura.

Yo tampoco sé lo suficiente de JavaScript para brindar ayuda, así que a ver si algún moderador pasa el hilo para allá y alguien te echa una mano ahí.