come fare volantino mappa di altezza variabile

Question

nella mia applicazione stavo facendo div della mappa come

<div id="map" style="height: 610px; width:100%"></div> 

ma per rendere la mia mappa sensibile che voglio fare in altezza anche il 100%, se faccio height: 100% allora non è lavoro.

Come posso rendere l'altezza anche variabile come larghezza in modo che la mappa possa essere vista correttamente su qualsiasi dispositivo.

Demo: http://jsfiddle.net/CcYp6/

Se si modifica l'altezza & larghezza della carta, allora non sarà possibile ottenere carta.

Answer 1

è necessario impostare gli elementi associati di height: 100%; prima

html, body { 
    height: 100%; 
} 

Demo

Demo (Questo non funzionerà come è definito nessun genitore altezza)

Spiegazione: Perché avete bisogno fare quello? Quindi quando specifichi l'altezza di un elemento in % allora la prima domanda che sorge è: 100% di cosa? Per impostazione predefinita, un div ha l'altezza di 0px, quindi 100% per un div semplicemente non funzionerà, ma l'impostazione degli elementi padre height su 100%; funzionerà.

Answer 2

È necessario impostare la dimensione div con JavaScript.

$("#map").height($(window).height()).width($(window).width()); 
map.invalidateSize(); 

Si può trovare un esempio completo here.

Answer 3

Usa altezza = "100vh" funziona nel browser più recente. ma è ok.